Справочник по CSS : Тематический указатель : Расширения CSS для Firefox (Gecko) : Свойства : -moz-box-shadow
Материал из Справочник Web-языков
Содержание |
Свойство -moz-box-shadow
Определяет и задает тень объекта.
Синтаксис
-moz-box-shadow: none | <shadow> [,<shadow>]*
Используемые значения
- <shadow> может принимать значения:
- inset
- Необязательное значение. Задает внутреннюю тень для объекта. Она располагается не снаружи, а внутри рамки, ограничивающей объект. Такая тень отображается выше фона, но под контентом и границами.
- color
- Необязательное значение. Задает цвет тени. Список всех цветов можно посмотреть в таблице Коды и названия цветов в HTML. Если значение не указано, то цвет тени зависит от используемого браузера. Например, в Firefox используется значение свойства color, а в Safari тень прозрачна, и если не описать значение color для -moz-box-shadow, то тень не будет видно.
- offset-x offset-y
- Обязательные значения. Задают смещение тени. Offset-x отвечает за горизонтальное смещение, отрицательные значения смещают тень левее элемента. Offset-y отвечает за вертикальное смещение, отрицательные значения смещают тень выше элемента. Когда для обоих параметров задано значение 0, тень располагается непосредственно за элементом, и может создаваться эффект размытия, если задано значение для blur-radius или spread-radius.
- blur-radius
- Необязательное значение. Если не задано, то по умолчанию имеет значение 0. Увеличивая это значение, вы создаете эффект размытия тени - она становится шире и менее яркой.
- spread-radius
- Необязательное значение. Если не задано, то по умолчанию имеет значение 0. Используя положительные значения, вы делаете тень больше и шире, а отрицательные - тоньше.
Значением по умолчанию является none. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
При описании свойства -moz-box-shadow, его значения перечисляются через запятую.
Если для элемента задано свойство -moz-border-radius, и углы элемента получаются закругленные, то такой же эффект применяется и к тени элемента.
Если задано z-позиционирование, то первая описываемая для элемента тень будет самой верхней.
Примеры
В примерах показано как описать свойство -moz-box-shadow для разных браузеров.
-moz-box-shadow: teal 60px -16px; -webkit-box-shadow: teal 60px -16px; box-shadow: teal 60px -16px;
-moz-box-shadow: black 10px 5px 5px; -webkit-box-shadow: black 10px 5px 5px; box-shadow: black 10px 5px 5px;
-moz-box-shadow: inset 0 0 1em gold; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold;
-moz-box-shadow: red 3px 3px, olive -1em 0 0.4em; -webkit-box-shadow: red 3px 3px, olive -1em 0 0.4em; box-shadow: red 3px 3px, olive -1em 0 0.4em;
Посмотрите также примеры на страницах box-shadow test и box-shadow tutorial and examples, используя последние версии браузеров Opera и Firefox.
Поддерживаемые браузеры
Firefox (Gecko) начиная с версии 3.5 (1.9.1) - для -moz-box-shadow.
Opera начиная с версии 10.5 - для box-shadow.
Safari (WebKit) начиная с версии 3.0 (522) - для -webkit-box-shadow.
Стандарты
CSS 3 Backgrounds and Borders, Editor's Draft