Inset shadow box css: box-shadow — CSS: Cascading Style Sheets

box-shadow — Справочник CSS

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад CSS Справочник Далее ❯

Пример

Добавить тени к различным элементам <div>:

#example1 {
  box-shadow: 5px 10px;
}

#example2 {
  box-shadow: 5px 10px #888888;
}

Редактор кода »

---

Определение и использование

Свойство box-shadow присоединяет к элементу одну или несколько теней.

Значение по умолчанию:	none
Унаследованный:	нет
Анимируемый:	да Прочитайте о animatable Попробовать
Версия:	CSS3
JavaScript синтаксис:	object.style.boxShadow=»10px 20px 30px blue» Попробовать

---

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.

Свойство
box-shadow	10.0 4.0 -webkit-	9.0	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5

---

---

CSS Синтаксис

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Примечание: Чтобы присоединить к элементу несколько теней, добавьте разделенный запятыми список теней («Попробовать » пример ниже).

Значение свойств

Значение	Описание	Воспроизвести
none	Значение по умолчанию. Тень не отображается	Воспроизвести »
h-offset	Требуется. Горизонтальное смещение тени. Положительное значение помещает тень на правую сторону бокса, отрицательное значение помещает тень на левую сторону бокса	Воспроизвести »
v-offset	Требуется. Вертикальное смещение тени. Положительное значение помещает тень ниже бокса, отрицательное значение помещает тень выше бокса	Воспроизвести »
blur	Необязательный. Радиус размытия. Чем выше число, тем более размытой будет тень	Воспроизвести »
spread	Необязательный. Радиус распространения. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени	Воспроизвести »
color	Необязательный. Цвет тени. Значение по умолчанию цвет текста. Смотреть на CSS Значение цвета для получения полного списка возможных значений цвета. Примечание: В Safari (на ПК)требуется параметр color. Если цвет не указан, тень не отображается вообще.	Воспроизвести »
inset	Необязательный. Изменяет тень с внешней тени (начало) на внутреннюю тень	Воспроизвести »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитайте о inherit

Совет: Подробнее о допустимых значениях (CSS Единицы длины)

---

Примеры

Пример

Добавить эффект размытия к тени:

#example1 {
  box-shadow: 10px 10px 8px #888888;
}

Редактор кода »

Пример

Определить радиус распространения тени:

#example1 {
  box-shadow: 10px 10px 8px 10px #888888;
}

Редактор кода »

Пример

Определить несколько теней:

#example1 {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Редактор кода »

Пример

Добавить врезное ключевое слово::

#example1 {
  box-shadow: 5px 10px inset;
}

Редактор кода »

Пример

Изображения брошены на стол. В этом примере показано, как создавать «полароидные» изображения и поворачивать их:

div.polaroid {
  width: 284px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
}

Редактор кода »

---

Связанные страницы

CSS Учебник: CSS Округленные углы

HTML DOM Справочник: Свойство boxShadow

❮ Назад CSS Справочник Далее ❯

ВЫБОР ЦВЕТА

---

---

---

ТОП Учебники

HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники

HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры

HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3. CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

---

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Box Shadow — Tailwind CSS

Домашняя страница Tailwind CSS Версия Tailwind CSS v2.0.3v1.9.6v0.7.4Tailwind CSS на GitHub

Утилиты для управления тенью блока элемента.

Справочник по классу по умолчанию

Внешняя тень

Используйте Shadow-SM , Shadow , Shadow-MD , Shadow-LG , Shadow-XL , или Shadow-2XL , чтобы применить. тени внешнего блока разного размера для элемента.

.shadow-см

.shadow

.shadow-md

.shadow-lg

.shadow-xl

.shadow-2xl

 

<дел>
<дел>
<дел>
<дел>
 

Внутренняя тень

Используйте утилиту shadow-inner , чтобы применить к элементу легкую внутреннюю тень. Это может быть полезно для таких вещей, как элементы управления формой или колодцы.

.shadow-inner

Нет тени

Используйте shadow-none , чтобы удалить существующую тень блока из элемента. Это чаще всего используется для удаления тени, которая была применена к меньшей точке останова.

.shadow-none

Отзывчивый

Чтобы управлять тенью элемента в определенной точке останова, добавьте префикс {экран}: к любой существующей утилите тени. Например, используйте md:shadow-lg , чтобы применить shadow-lg 9.0010 только при средних размерах экрана и выше.

 <дел>
  

 // 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)',
        никто: 'нет',
      }
    }
  }