Свойство box-shadow CSS
- страница выше box-reflect
- Следующая страница box-sizing
определение и использование
атрибут box-shadow добавляет одному или нескольким рамкам тень.
подсказка:используйте атрибуты border-image-* для создания красивых масштабируемых кнопок!
смотрите также:
учебник CSS3:Борды CSS3
руководство HTML DOM:атрибут boxShadow
пример
добавить box-shadow к элементу div:
div
{
box-shadow: 10px 10px 5px #888888;
}
более примеров в нижней части страницы.
CSS синтаксис
box-shadow: h-shadow v-shadow размытие распространение цвет внутренняя тень;
замечание:атрибут box-shadow добавляет одному или нескольким рамкам тень. Этот атрибут представляет собой список тени, разделенный запятыми, каждая тень определяется 2-4 значениями длины, опциональными значениями цвета и опциональным ключевым словом inset. Пропущенные значения длины равны 0.
значение атрибута
| значение | описание | тест |
|---|---|---|
| h-shadow | обязателен. Горизонтальное положение тени. Допускаются отрицательные значения. | тест |
| v-shadow | обязателен. Вертикальное положение тени. Допускаются отрицательные значения. | тест |
| размытие | опционально. Расстояние размытия. | тест |
| распространение | опционально. Размер тени. | тест |
| цвет | опционально. Цвет тени. См. CSS значения цвета. | тест |
| внутренняя тень | опционально. Измените внешнюю тень (outset) на внутреннюю тень. | тест |
технические детали
| по умолчанию: | нет |
|---|---|
| наследование: | нет |
| версия: | CSS3 |
| JavaScript синтаксис: | объект.style.boxShadow="10px 10px 5px #888888" |
более примеров
- изображение, брошенное на стол
- Этот пример демонстрирует, как создать изображение Polaroid и повернуть его.
поддержка браузерами
числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
числа с -webkit- или -moz- указывают на первую версию, использующую префикс.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
- страница выше box-reflect
- Следующая страница box-sizing
