Отбрасывать тени! Для коробок!
Широко поддерживается, хотя Internet Explorer версий 8 и более ранних и Opera Mini являются сторонними.
Базовая выпадающая тень и внутренняя тень.
Возможные значения
none
Значение: none.
Описание: тени нет. По умолчанию.
inset [длина] [длина] [длина] [длина] [цвет]
Значение: inset [длина] [длина] [длина] [длина] [цвет].
Описание:
inset необязательно — если используется, это указывает, что тень падает внутрь, а не наружу.
Первая длина ─ это смещение по горизонтали. Положительное значение сдвигает тень вправо. Отрицательное значение сдвигает ее влево. Обязательно.
Вторая длина ─ это смещение по вертикали. Положительное значение отбрасывает тень вниз. Отрицательное значение отбрасывает ее вверх. Обязательно.
Третья длина ─ это радиус размытия. Чем выше значение, тем больше размытие. Не должно быть отрицательным. Необязательно — если не используется, по умолчанию имеет значение 0 (острый край — без размытия).
Четвертая длина ─ это расстояние распространения. Положительное значение увеличивает тень. Отрицательное значение сокращает ее. Необязательно — если не используется, по умолчанию используется 0 (без распространения).
Color ─ это цвет тени. Необязательно — если не используется, по умолчанию используется вычисленное значение color.
Пример: inset 5px -5px 10px 10px rgba(0,0,0,0.2)
[значения], [значения]
Значение: [значения], [значения].
Описание: множественные тени. Список значений тени может быть разделён запятыми. Первое установленное значение будет определять верхнюю тень, второе ─ тень, созданную под ней, и так далее.
Пример: 2px 2px 3px red, 4px 4px 3px blue
inherit
Значение: inherit.
initial
Значение: initial.
unset
Значение: unset.
Пример
#box1 {
color: red;
box-shadow: 5px -5px;
}
/* Красная падающая тень, растягивающаяся на 5 пикселей вправо и на 5 пикселей вверх, с очень четкими краями.*/
#box2 {
box-shadow: inset 0 0 10px rgba(0,0,0,.5);
}
/* Однородная полупрозрачная черная внутренняя тень с размытием шириной 10 пикселей.*/
#box3 {
box-shadow: 5px -5px, inset 0 0 10px rgba(0,0,0,.5);
}
/* Две тени, повторяющие те, что были в #box1 и #box2.*/Страницы в тему:
Все свойства CSS
all background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow caption-side clear clip color content counter-increment counter-reset cursor direction display empty-cells float font font-family font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity orphans outline outline-color outline-style outline-width overflow padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-transform top transform transform-origin transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space widows width word-spacing z-index
