flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180

CSS-свойство box-shadow

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

Значение по умолчанию: none
Применяется к: Все элементы. Это также относится к ::first-letter
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

box-shadow: [ inset [ offset-x offset-y blur-radius spread-radius color ] ] | none | initial | inherit

Примеры написания кода свойства box-shadow:

.shadow {
    width: 150px;
    height: 150px;
    background: #ccc;
    border: 1px solid #999;
    box-shadow: 2px 2px 4px 2px #999;
}

Вы можете использовать ключ inset, чтобы тень стала внутренней. Врезанные тени рисуются внутри границы, над фоном (background), но под содержимым (content).

.shadow-inside {
    width: 150px;
    height: 150px;
    background: #ccc;
    border: 1px solid #999;
    box-shadow: inset 0 0 6px 2px #999;
}

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

В следующей таблице описаны значения этого свойства.

Значение Описание
Обязательно должны быть указаны следующие значения
offset-x Первое значение указывает горизонтальное смещение тени. Положительное значение смещает тень вправо от элемента, в то время как отрицательное значение смещает тень влево
offset-y Положительное значение смещает тень вниз, тогда как отрицательное значение смещает тень над элементом.
Опционально — следующие значения необязательны
blur-radius Третье значение — это радиус размытия. Чем больше это значение, тем больше размытие, поэтому тень становится больше и светлее. Значение по умолчанию равно 0, тень резкая. Отрицательные значения не допускаются.
spread-radius Четвертая длина — это расстояние распространения тени. Положительные значения приводят к уменьшению формы тени во всех направлениях на указанный радиус. Отрицательные значения приводят к сокращению формы тени.
color Устанавливает цвет тени. Значение может быть указано в любом поддерживаемом формате значение цвета. Если не указано, применяется текущий color элемента.
inset Если присутствует, изменяет тень на внутреннюю. Тени рисуются внутри границы элемента, над фоном, но под содержимым элемента.
none Тень не будет отображаться. Это значение установлено по умолчанию.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента box-shadow.

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

Свойство box-shadow поддерживается во всех основных браузерах.

kwork banner 480x320kwork banner 728x90kwork banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано
Подробнее