English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут box-shadow CSS применяет один или несколько эффектов тени к рамке элемента.
В таблице приведено описание использования и историю версий этого свойства, а также грамматика использования в скриптах JavaScript.
| Значение по умолчанию: | none |
|---|---|
| Применяется к: | Все элементы. Также применяется к:::first-letter. |
| Инherit: | Нет |
| Анимируемо: | Да.Просмотрите атрибут анимации. |
| Версия: | Новая функция CSS3 |
| JavaScript грамматика: | object.style.boxShadow="8px 8px 6px #000000" |
Грамматика этого свойства такая:
box-shadow: [, , ... shadowN] | none | initial | inherit где тень: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]
Ниже приведен пример того, как использовать атрибут box-shadow.
.shadow{
Пример
.shadow-inside{
width: 150px;
height: 150px;
box-shadow: 2px 2px 4px 2px #999;
border: 1px solid #999;box-shadow: inset 0 0 6px 2px #999;Вы можете использовать ключевое слово inset для применения тени внутри рамки элемента. Тень рисуется внутри рамки, над фоном, но под содержимым.
.shadow-inside{
Пример
.shadow-inside{
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #999;box-shadow: inset 0 0 6px 2px #999;Протестируйте, посмотрите‹/›
| Значение свойства | Таблица описывает значения этого свойства. |
|---|---|
| Значение Описание | |
| Обязательно | -Следующие значения необходимо указать для того, чтобы свойство было эффективно. |
| offset-x | Первый размер указывает на горизонтальное расстояние тени. Положительное значение нарисует тень вправо от рамки, а отрицательное значение нарисует тень влево от рамки. |
| offset-y Второй размер указывает на вертикальное расстояние тени. Положительное значение сместит тень вниз, а отрицательное значение сместит тень над элементом. | |
| Опционально | -Следующие значения являются опциональными. |
| spread-radius | Четвертый размер — это расстояние расширения. Положительное значение会使 форму тени расширяться в всех направлениях на указанный радиус. Отрицательное значение会使 форму тени сжиматься. |
| color | Цвет — это цвет тени. Значение может быть любым поддерживаемым:Цветовое значение. Если не указано, то обычно это:colorзначение свойства. |
| inset | Если существует, то проекция тени будет изменена с внешней тени на внутреннюю тень. Встроенная тень рисуется внутри рамки, над фоном, но под содержимым элемента. |
| none | Тень не будет отображаться. Это значение по умолчанию. |
| initial | Установить этот параметр в его значение по умолчанию. |
| inherit | Если указано, то связанный элемент использует значение свойства box-shadow родительского элемента. |
Совместимость браузеров для свойства box-shadow, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
См. также следующие руководства:CSS3 тени,CSS псевдоэлементы.
Связанные свойства:text-shadow.