Css внутренняя тень блока: Внутренние тени в CSS / Хабр

Дополнительные сведения о функциях адаптивного дизайна Tailwind см. в документации по адаптивному дизайну.

Настройка

Box Shadows

По умолчанию Tailwind предоставляет шесть утилит для создания теней, одну утилиту для создания внутренних теней и утилиту для удаления существующих теней. Вы можете изменить, добавить или удалить их, отредактировав тему

Если предоставлена ​​тень DEFAULT , она будет использоваться для утилиты shadow без суффикса. Любые другие ключи будут использоваться как суффиксы, например ключ '2' создаст соответствующую утилиту shadow-2 .

 // tailwind.config.js
  модуль.экспорт = {
    тема: {
      коробкаТень: {
        sm: '0 1px 2px 0 rgba(0, 0, 0, 0,05)',
        ПО УМОЛЧАНИЮ: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0,25)',
+ '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
        внутренний: 'вставка 0 2px 4px 0 rgba (0, 0, 0, 0,06)',
        никто: 'нет',
      }
    }
  } 

Варианты

По умолчанию для утилит тени блока генерируются только адаптивные варианты, групповое наведение, фокус внутри, наведение и фокус.

Вы можете контролировать, какие варианты создаются для утилит тени окна, изменяя свойство

tailwind. config.js

Например, эта конфигурация также будет генерировать активные варианты:

 // tailwind.config.js
  модуль.экспорт = {
    варианты: {
      продлевать: {
        // ...
+ boxShadow: ['активный'],
      }
    }
  } 

Отключение

Если вы не планируете использовать утилиты box shadow в своем проекте, вы можете полностью отключить их, установив для свойства boxShadow значение

 // хвостовой ветер.config.js
  модуль.экспорт = {
    основные Плагины: {
      // ...
+ boxShadow: ложь,
    }
  } 

←Ring Offset ColorOpacity→

На этой странице

• Ссылка на класс по умолчанию
• Внешняя тень
• Внутренняя тень
• Без тени
• Адаптивный
• Настройка
• Тени блоков
• Варианты
• Отключение 901 26

Специальные эффекты

В CSS есть ряд свойств CSS, предназначенных для создания конкретных интересных визуальных эффектов. Среди них закругленные углы и тени.

Два вида теней

В CSS тени можно добавлять к внешнему блоку элемента с помощью box-shadow или непосредственно в текст с помощью text-shadow . Синтаксис значения для обоих идентичен.

Тень коробки

box-shadow размещает тень на внешней рамке элемента (невидимая рамка позади элемента, которая становится видимой при применении background-color ).

Значение свойства принимает несколько терминов в следующем порядке:

1. [x-offset] — Насколько смещена тень по горизонтальной оси. Положительные числа сдвигают тень вправо, а отрицательные числа сдвигают ее влево.
2. [y-offset] — Насколько тень смещена по вертикальной оси. Положительные числа сдвигают тень вниз, а отрицательные числа сдвигают ее вверх.
3. [количество размытия] — Насколько тень размыта или размыта по краям. Более высокие значения приводят к более размытому краю. Отсутствие значения приводит к тени с резким краем.
4. [величина распространения] — Положительные значения приводят к тому, что тень становится больше, чем поле элемента. Отрицательные значения вызывают его сжатие. Отсутствие значения приводит к тени того же размера, что и поле элемента.
5. [цвет] — Определяет цвет тени.
6. inset — включение этого ключевого слова приводит к размещению тени внутри блока элемента.

В приведенном выше примере посмотрите, сможете ли вы понять, как сделать края тени более размытыми. Можете ли вы сделать тень больше в целом? Попробуйте изменить цвет. Что произойдет, если вы добавите ключевое слово

Тень текста

Аналогично, text-shadow помещает тень непосредственно за буквами текста.

Как и box-shadow , text-shadow принимает несколько терминов для своего значения в следующем порядке: [смещение по x] [смещение по y] [количество размытия] [цвет] . Значения [spread] и inset нельзя использовать

Можете ли вы сместить тень так, чтобы она находилась сверху и слева от текста, а не справа внизу? Можете ли вы убрать размытие с тени, чтобы она была резкой?

Закругленные углы

CSS border-radius позволяет создавать закругленные углы на блоке элемента. Любая рамка или фон, присутствующие в элементе, будут учитывать закругленные углы

border-radius принимает любое значение измерения для определения размера, до которого округляются углы. Это единственное свойство на самом деле является сокращением для отдельных границ-верхний-левый-радиус , границ-верхний-правый-радиус

• Одно значение: все четыре угла.