Используется для отбрасывания теней (часто называемых «падающими тенями», как в Photoshop) от элементов. Вот пример с максимально возможной поддержкой браузеров:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Это:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Горизонтальное смещение (обязательное) тени, положительное означает, что тень будет справа от поля, отрицательное смещение поместит тень слева от поля.
- Вертикальное смещение (обязательно) тени: отрицательное означает, что тень будет выше прямоугольника, положительное означает, что тень будет ниже поля.
- Радиус размытия (обязательно), если установлено значение 0, тень будет резкой, чем выше число, тем более размытым она будет и тем дальше будет расширяться тень. Например, тень с горизонтальным смещением 5 пикселей, которая также имеет радиус размытия 5 пикселей, будет составлять 10 пикселей общей тени.
- Радиус распространения (необязательно), положительные значения увеличивают размер тени, отрицательные значения уменьшают размер. По умолчанию - 0 (размер тени такой же, как у размытия).
- Цвет (обязательно) - принимает любое значение цвета, например, hex, named, rgba или hsla. Если значение цвета опущено, тени блоков отображаются в цвете переднего плана (текст
color). Но имейте в виду, что старые браузеры WebKit (до Chrome 20 и Safari 6) игнорируют правило, когда цвет не указан.
Использование полупрозрачного цвета rgba(0, 0, 0, 0.4)является наиболее распространенным и приятным эффектом, поскольку он не полностью / непрозрачно закрывает то, что находится поверх, но позволяет тому, что находится внизу, немного просвечивать, как настоящая тень.
Пример
Внутренняя тень
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Пример
Internet Explorer (8 и ниже) Box Shadow
Вам нужен дополнительный элемент, но он совместим с filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Только с одной стороны
Используя отрицательный радиус распространения, вы можете сжать тень коробки и оттолкнуть ее только от одного края коробки.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Множественные границы и многое другое
Вы можете разделять тень блока запятыми сколько угодно раз. Например, здесь показаны две тени с разными позициями и разными цветами на одном элементе:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Пример показывает, как вы можете использовать это для создания нескольких границ:
Посмотрите на Pen Multiple box-shadow cool! Автор: Крис Койер (@chriscoyier) на CodePen.
Применяя тени к псевдоэлементам, которыми вы затем манипулируете, вы можете получить довольно причудливые трехмерные тени блока:
См. Pen CSS3 Box Shadows Effects от Халила Ибрагима Нуроглу (@haibnu) на CodePen.
Сверхгладкие тени с помощью нескольких значений, разделенных запятыми:
См. Pen
smooth box-shadow Криса Койера (@chriscoyier)
на CodePen.
Поддержка браузера
См. Фрагмент вверху страницы для получения подробной информации о покрытии префиксов поставщика. Это одно из тех свойств, при котором на данном этапе вполне разумно отказаться от префиксов.