Тень блока (box-shadow)

CSS свойство box-shadow позволяет добавлять элементу  одну или несколько теней, указывая их параметры через запятую. Если для элемента  задается свойство border-radius то тень будет с закругленными углами. Расположение теней в z-оси такое же как и расположение теней в свойстве text-shadows (Первая тень будет выше).

Синтаксис

Formal syntax: none | [inset? && [ <сдвиг по x> <сдвиг по y> <размытие>? <растяжение>? <цвет>? ] ]#

Значения

inset

Если не задан(по умолчанию), тень будет снаружи элемент и создаст эффект выпуклости блока.

При наличие ключевого слова inset, тень будет падать внутри блока и создаст эффект вдавленности.

<смещение по x> <смещение по y>

These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. See <length> for possible units.
If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).

<blur-radius>

This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).

<spread-radius>

This is a fourth <length> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

<color>

See <color> values for possible keywords and notations.
If not specified, the color used depends on the browser - it is usually the value of the color property, but note that Safari currently paints a transparent shadow in this case.

Live examples

• box-shadow test
• box-shadow tutorial and examples

box-shadow: 60px -16px teal;

box-shadow: 10px 5px 5px black;

box-shadow: 3px 3px red, -1em 0 0.4em olive;

box-shadow: inset 5em 1em gold;

box-shadow: 0 0 1em gold;

box-shadow: inset 0 0 1em gold;

box-shadow: inset 0 0 1em gold, 0 0 1em red;

Specifications

Browser compatibility

Notes

• Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3).
• Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a width of 100%, you'll see a scrollbar.
• Gecko 13 (Firefox 13) removed support for -moz-box-shadow. Since then, only the unprefixed version is supported.
• In order to get box-shadow in IE9 or later, you need to set border-collapse to separate.