Справочник по 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

Ссылки на источники

https://developer.mozilla.org/en/CSS/-moz-box-shadow

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
смотрим также
    Rambler\'s Top100 Индекс цитирования
    смотрим также