Drop Shadow и Box Shadow CSS в чем разница, и какой метод использовать

Содержание материала:

Why does box-shadow look different than filter: drop-shadow

I’ve always been using CSS box-shadows since, but now I have an image with rounded corners and wanted to give it a rounded shadow. So I tried using filter: drop-shadow, but unfortunately it looks different from box-shadow. In my opinion, they should look the same, am I doing something wrong?

Is the appearance of these shadows defined in any spec, or do browsers just what they think they should do? Why do those look different?

3 Answers 3

I believe this is a bug. The W3C specification for CSS filters states that «values are interpreted as for box-shadow [CSS3BG].» Therefore, similar results should be expected from the two properties.

I achieved a similar issue, as seen here:

This will display incorrectly in Chrome and Firefox like this:

However, it will display correctly in Safari like this:

If I decrease the shadow blur radius in Chrome by a factor of two, I get the expected result:

I have filed a bug report for Chromium and Firefox.

UPDATE: January 12, 2020

It turns out it wasn’t a bug, but an issue with the specification.

For a box shadow the blur value is generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius. — Robert Longson

A specification issue has been raised here.

This most likely explains the rendering differences you are seeing.

Also note the browser support of CSS Drop shadow vs Filter.

they are not the same . they achieve different things.

in the case of filter:drop-shadow some browsers do not support the spread value as the box-shadow does. that’s why they look different. it also doesn’t support inset

but as an advantage with filter:drop-shadow you can generate shadow around irregular shapes or images, whereas box-shadows generates a rectangular shadow.

see example below :

as you can see , with drop-shadow the pseudo-element also has a shadow around it, whereas with box-shadow it does not.

Перевод Layer Style — Drop Shadow (Стиль слоя — Тень) в Фотошопе

Перевод и месторасположение Layer Style — Drop Shadow (Стиль слоя — Тень) на примере Photoshop CC (Eng/Rus).

Версия Photoshop: Photoshop CC (2014)

Дата: 10.04.2014

Обновлено: 25.08.2020

Узнать как перейти в Blending Option (Параметры наложения / Окно «Стиль слоя» (Layer Style)) можно в материале по ссылке — «Как перейти в Blending Option (Параметры наложения) в Фотошопе».

Перейти в Layer Style — Drop Shadow (Стиль слоя — Тень) можно так же из верхнего меню:

На изображениях ниже вы можете наглядно увидеть месторасположение и перевод Layer Style — Drop Shadow (Стиль слоя — Тень) на примере Английской и Русской версии Photoshop CC.

Перевод Layer Style — Drop Shadow (Стиль слоя — Тень) на примере Photoshop CC (2014) (Eng) Перевод Стиль слоя — Тень (Layer Style — Drop Shadow) на примере Photoshop CC (2014) (Rus)

Варианты Drop Shadow — Blend Mode (Тень — Режим наложения)

Normal — Нормальный;

Dissolve — Затухание;

Darken — Затемнение;

Multiply — Умножение;

Color Burn — Затемнение основы;

Linear Burn — Линейный затемнитель;

Darker Color — Темнее;

Lighten — Замена светлым;

Screen — Экран;

Color Dodge — Осветление основы;

Color Dodge (Add) — Линейный осветлитель (добавить);

Lighter Color — Светлее;

Overlay — Перекрытие;

Soft Light — Мягкий свет;

Hard Light — Жесткий свет;

Vivid Light — Яркий свет;

Linear Light — Линейный свет;

Pin Light — Точечный свет;

Hard Mix — Жесткое смешение;

Difference — Разница;

Exclusion — Исключение;

Subtract — Вычитание;

Divide — Разделить;

Hue — Цветовой тон;

Saturation — Насыщенность;

Color — Цветность;

Luminosity — Яркость;

Варианты Drop Shadow — Blend Mode (Тень — Режим наложения) на примере Photoshop CC (2014) (Eng) Варианты Тень — Режим наложения (Drop Shadow — Blend Mode) на примере Photoshop CC (2014) (Rus)

Стиль слоя — Тень — Элементы

Structure — Структура;

Opacity — Непрозрачность;

Angle — Угол;

Use Global Light — Глобальное освещение;

Distance — Смещение;

Spread — Размах;

Size — Размер;

Quality — Качество;

Contour — Контур;

Anti-aliased — Сглаживание;

Noise — Шум;

Layer Knocks Out Drop Shadow — Слой выбивает тень;

drop-shadow()

On this Page

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

A drop shadow is effectively a blurred, offset version of the input image’s alpha mask, drawn in a specific color and composited below the image.

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element’s entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

Syntax

The drop-shadow() function accepts a parameter of type (defined in the box-shadow property), with the exception that the inset keyword is not allowed.

Топ-пост этого месяца:  Что такое SEO-юзабилити сайта в дизайне и проектировании веб-интерфейсов

drop-shadow()

Функция drop-shadow() добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color .

Пример

Результат данного примера показан на рис. 1. Обратите внимание, что тень повторяет линии изображения.

Рис. 1. Тень в изображении

Примечание

Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter .

Спецификация ?

Спецификация Статус
Filter Effects Module Level 1 Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

13 18 53 15 40 6 9.1 35
4.4 35 37 6.1 9.3

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  • — свойство браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Drop Shadow (Отбрасывать тень)

Drop Shadow (Отбрасывать тень)

Drop Shadow (Отбрасывать тень) – эффект, позволяющий имитировать тень, отбрасываемую элементом, находящимся на текущем слое. Выберите данный эффект в списке эффектов, после чего появляется окно настройки тени (рис. 8.2), где мы можем задать такие параметры, как Opacity (Прозрачность) (отвечает за насыщенность тени), Angle (Угол) (угол падения тени), Distance (Расстояние) (расстояние от элемента до тени), Spread (Разброс) (разброс тени), Size (Размер) (размер тени), Noise (Шум) (неоднородность тени).

Рис. 8.2. Параметры внешней тени

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

Рис. 8.3. Силуэту справа была добавлена тень, что сразу увеличило его зрительный объем

Обратите внимание на панель слоев после применения эффекта. Теперь слой Layer 1 (Слой 1) имеет специальную структуру, определяющую состав использованных эффектов (рис. 8.4).

Рис. 8.4. Структура слоя после применения в отношении него эффекта

Здесь появились две новые строчки: Effects (Эффекты) и Drop Shadow (Отбрасывать тень). Первая позволяет оперировать сразу всеми примененными к этому слою эффектами, все последующие – каждым эффектом в отдельности. Мы использовали эффект тени, именно поэтому и видим соответствующую строчку. Например, если мы нажмем кнопку с изображением глаза – Indicates Layer Visibility (Указатель видимости слоя) слева от строчки Effects (Эффекты), у нас будут временно включаться и отключаться все эффекты, а если слева от какого-то определенного эффекта – то будет настраиваться видимость только его.

Эффект тени позволяет создать иллюзию объемного изображения. Его полезно применять к тексту или к форме.

При помощи инструмента Horizontal Type Tool (Горизонтальный Текст) наберите какой-либо текст на изображении, затем к слою, содержащему этот текст, добавьте эффект тени. Вы увидите, что буквы как будто стали объемнее (рис. 8.5). Так же можно придавать объем формам. Добавьте любую форму, например, при помощи инструмента Rectangle Tool (Прямоугольник) (см. рис. 6.49). Выберите в списке эффектов этого слоя эффект тени. Прямоугольник стал выглядеть гораздо более объемно (рис. 8.6).

Рис. 8.5. Слева – оригинал текста, справа – с применением эффекта тени

Рис. 8.6. К прямоугольнику справа применен эффект тени

Стиль слоя Drop Shadow в Фотошоп

Стиль слоя Drop Shadow (Тень) – один из базовых инструментов Photoshop, позволяющий существенно улучшить дизайн. И в этом уроке я подробно расскажу о его настройках и как с ними работать.

Для чего использовать Drop Shadow?

Создание глубины на основе 2D-объектов – одна из самых сложных задач в дизайне. И для получения реалистичного эффекта нужна постоянная практика. Однако, в Фотошоп есть готовый инструмент, позволяющий максимально быстро добиться качественного результата.

Настройки стиля слоя Тень

Открываем Photoshop и создаем новый документ. Размер выбираем любой. Затем добавляем фигуру, например, прямоугольник. Для этого используем инструмент Rectangle (U). Или можно создать текстовый слой с помощью инструмента Type (T).

Чтобы открыть настройки стиля слоя Тень, в верхнем меню переходим Layer – Layer Style – Drop Shadow (Слой – Стиль слоя – Тень). Также можно дважды кликнуть левой кнопкой мышки по слою, к которому хотите применить тень. Откроется окно Layer Style (Стиль слоя).

Слева в меню мы выбираем Drop Shadow (Тень) и обязательно ставим галочку напротив. Справа появятся настройки стиля слоя.

Blend Mode (Режим наложения)

Этот параметр отвечает за то, как тень смешивается с фоном. По умолчанию выбран Multiply (Умножение) и в большинстве случаев он лучше всего подходит для данного эффекта.

Тень не всегда бывает черной, поэтому мы можем изменить ее цвет. Для этого справа от режима наложения кликаем по цветовому полю и в открывшемся окне Color Picker (Выбор цвета) выбираем нужный цвет. На примере ниже слева использована стандартная черная тень, а справа – красная.

Opacity (Непрозрачность)

Непрозрачность отвечает за видимость тени. Чем выше значение, тем темнее и насыщеннее тень. Уменьшение непрозрачности делает тень менее заметной и контрастной.

Angle (Угол)

С помощью угла можно указать положение источника света и направление падения тени. Ниже на скриншоте слева свет находится снизу под текстом и тень падает вверх. Справа, наоборот, источник света расположен сверху и тень падает вниз. В более новых версиях Adobe Photoshop можно мышкой вручную подвигать тень и выбрать наиболее удачное расположение.

Global Light (Глобальное освещение) – направление тени, которое действует на весь документ. Пока активна эта опция, будет использоваться одно и то же значение угла. Снимите галочку, если хотите использовать разный угол для каждого объекта.

Distance (Смещение)

С помощью Distance (Смещение) можно отдалить или приблизить тень от объекта. В более поздних версиях Adobe Photoshop это также можно делать вручную, если потянуть за тень левой кнопкой мышки.

На примере ниже текст слева практически лежит на поверхности, а на примере справа, благодаря смещению, создается иллюзия, что текст парит над фоном.

Spread (Размах)

Этот параметр отвечает за то, насколько далеко тень распространяется вокруг объекта. С помощью Размаха можно сделать более густую тень. Обычно, эту настройку используют в связке с Размером, чтобы получился более естественный результат.

Size (Размер)

С помощью Размера можно смягчить или, наоборот, сделать резкими края тени. От этого параметра во многом зависит реалистичность эффекта. У текста слева размера установлен на 0. В результате создается иллюзия, что источник света расположен вплотную к тексту. Справа – установлен на 12 и тень выглядит гораздо мягче.

Contour (Контур)

Контур отвечает за форму тени. По умолчанию, выбран обычный линейный контур. Остальные варианты могут быть полезны при работе с материалами с отражающими поверхностями. Внешний вид контура зависит от настроек, о которых вы узнали выше.

Ниже справа я установила конусообразный контур и уменьшила Distance (Смещение) до 0. В результате получилась тень с дополнительным свечением по краю.

С помощью Anti-aliased (Сглаживание) можно сгладить границы тени. Лучше всего держать его активным, но учтите, что разница может быть минимальной.

Noise (Шум)

Шум отвечает за качество тени. Можно создать гладкую тень или добавить потертости и гранж-эффект. Функция полезна, если вы добавляете тень на зернистых и текстурных поверхностях.

Layer Knock Out Drop Shadow (Слой выбивает тень)

Если вы применяете тень к прозрачному объекту, этот параметр позволит включить/отключить видимость тени через этот объект.

Попробуйте на панели слоев уменьшить Fill (Заливка), добавьте тень и включите/выключите опцию Слой выбивает тень. Ниже на скриншоте я установила Заливку обоих слоев на 0%.

Выбираем текстовый слой справа. Открываем стили слоя и применяем Drop Shadow (Тень). Снимаем галочку с Layer Knock Out Drop Shadow (Слой выбивает тень) и жмем ОК. В результате тень просвечивается через текст, как будто его совсем нет.

Сохранение и загрузка настроек

Если вы хотите сохранить ваши настройки Drop Shadow (Тень), в нижней части окна нажмите на кнопку Make Default (Использовать по умолчанию). В результате текущие параметры станут настройками по умолчанию.

Нажмите кнопку Reset to Default (Восстановить значения по умолчанию), чтобы вернуться к предыдущим параметрам. Это позволит вам экспериментировать с настройками стиля и при необходимости восстанавливать стандартные значения, чтобы начать все заново.

Копируем стиль слоя Drop Shadow

Если у вас Photoshop не ниже версии СС, то вы можете копировать стили в рамках одного слоя. Это очень удобно при создании сложных эффектов, для которых нужно много стилей слоя.

В окне Layer Style (Стиль слоя) справа напротив названия стиля есть кнопка плюс (+). Нажмите на нее и появится точная копия Тени. Так, на одном слое можно создавать до 10 дубликатов.

На примере выше я добавила эффект длинной тени. Для этого я создала 10 копий стиля слоя Drop Shadow (Тень) и увеличивала Distance (Смещение) каждой следующей копии на 1 пиксель.

Поздравляю, теперь вы знаете, что такое стиль слоя Drop Shadow (Тень) и умеете его настраивать. Приятного творчества!

Тень блока (свойство box-shadow) | CSS

box-shadow generator

Свойство box-shadow (w3.org) создаёт элементу тень.

inset

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

цвет одной стороны

цвет другой стороны

Эффект тени блока

Тень вокруг div CSS

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.

CSS тень с одной стороны

Снизу (под блоком div)

По бокам (справа и слева)

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

Еще варианты можно посмотреть у css.yoksel.ru.

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

Как сделать выпуклый элемент с округлыми краями

box-shadow inset и картинка img

box-shadow и HTML тег input

Сначала поле как-будто вдавленное, при наведении появляется голубая обводка, а при фокусе виден эффект плавно появляющегося свечения. Вот так может выглядеть всплывающая форма обратной связи.

Или подсветка внутри input (получилась красивая форма входа CSS):

box-shadow и transition или animation

box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

75 комментариев:

К boxShadow подставляйте необходимые цифры.

Один селектор, я посчитала лишним писать каждый раз HTML. К тому же тут не нужен даже весь код CSS, нужно только значение box-shadow. У «box-shadow inset и картинка img» и ниже есть HTML после CSS. Анонимный Отлично СПАСИБИЩЕ! Анонимный Спасибо за статью. А что нужно добавит, чтоб это работало и в сафари 5.1. ? у меня не получается! NMitra Добавьте -webkit-

-webkit-box-shadow: 0 0 8px; Анонимный Нет, не помогает. Я взял на вооружения boxShadow18. Сафари не реагирует. NMitra Он вообще box-shadow не понимает или именно мой код? У браузеров может быть разная поддержка на разных устройствах. На компьютере будет работать, а на планшетах и телефонах — нет. Эффект box-shadow можно заменить с помощью фоновой картинки. Анонимный #leftmenu <
width: 100%;
max-width: 180px;
margin: 1em auto;
padding: 1em;
border-radius: 40px;
background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));/*(Скорее всего тут я допускаю ошибку*/
box-shadow:
inset rgba(0,0,0,.6) 0 -3px 8px,
inset rgba(252,255,255,.7) 0 3px 8px,
rgba(0,0,0,.8) 0 3px 8px -3px;
-webkit-box-shadow: inset 0px 0px -3px 8px rgba(0, 0, 0, 0.6),
-webkit-box-shadow: inset 0px 0px 3px 8px rgba(252, 255, 255, 0.7),
-webkit-box-shadow: 0px 3px 8px -3px rgba(0, 0, 0, 0.8);
>
NMitra Вместо одной

background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));

background-color: #646464;
background-image: -webkit-radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
background-image: radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35)); Анонимный #leftmenu
День добрый! Я Вас не оставляю в покое. Спасибо что откликнулись. Просто действительно понравилось ваша статья и примеры, и решил некоторые свой блоки оформить подобным образом. Что касается моей проблемы, такова эффекта я и вчера добился, но тогда пропадает эффект выпуклости, а это для меня как-то важно. А именно почему можете посмотреть, при желании, на сайте www.dlcompany.org спасибо за отзывчивость. Анонимный Скажите пожалуйста, как для движка mozilla применить одновременно и внутреннюю и внешнюю тень, через запятую работает только одна тень (которая первая, вторая игнорируется). Вот правда — на движке web-kit работает всё 100% — и в chrome и в maxthon — и вроде даже в последней opera, а вот в seamonkey, mozilla, pale moon — нет, в internet explorer — тоже неработает (я имел ввиду запись типа:
box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-moz-box-shadow: 0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-webkit-box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);) NMitra Вы хоть имя подставляйте.

Комментарий 46:
сделать так, чтобы на всех браузерах на всех устройствах при использовании всех операционных систем картинка 3D выглядела одинаково крайне не просто. Или просто, коли использовать нарисованный background: url(). Разработчик может лишь следовать общим стандартам w3.org и сделать так, чтобы при отсутствии поддержки box-shadow или другого свойства макет сайта не разъехался и были доступны основные функции регистрации, заказа, формы связи и т.п.

Комментарий 47:
у меня всё работает на windows, префиксы пишутся в другом порядке

Box-shadow: тень для элемента

Вы можете добавлять к элементам тень и изменять ее внешний вид с помощью CSS-свойства box-shadow. Этот стиль позволяет воплотить в жизнь интересные эффекты, например, объемность и трехмерность блока. Свойство поддерживается всеми современными браузерами. Исключение составляют IE8 и Opera Mini.

Свойство box-shadow: синтаксис

Данный стиль записывается следующим образом:

Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):

  • Ключевое слово inset : параметр, который необязательно указывать; рисует тень внутри элемента.
  • Сдвиг по оси X: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное — влево. Значение 0 означает, что тень без сдвига.
  • Сдвиг по оси Y: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное — вверх. Значение 0 — это тень без сдвига.
  • Радиус размытия: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию — 0 . В таком случае тень будет идеально четкой.
  • Расширение: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию — 0 .
  • Цвет тени: с этим параметром всё понятно — он задает цвет тени элемента. Цвет по умолчанию — черный.

Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow.

Данное свойство может принимать несколько групп значений (делать несколько теней одновременно). Для этого понадобится перечислить эти группы параметров через запятую. Например:

Примеры box-shadow

Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!

Есть ли причина использовать css box-shadow для drop-shadow?

Предполагая совместимость с клиентом, существует ли ситуация, когда CSS box-shadow предпочтительнее filter: drop-shadow .

От the article похоже drop-shadow является ускоренным расширением HW box-shadow . Это означает, что мы должны в основном использовать drop-shadow вместо box-shadow ?

Создан 16 авг. 12 2012-08-16 14:55:06 Harry

2 ответа

Существует только одна разница между box-shadow и filter: drop-shadow . С box-shadow вы можете использовать inset shadows, но вы не можете сделать это с filter: drop-shadow . Все зависит от вас.Check this example.

Почему лучше использовать box-shadow insted of filter: drop-shadow ?

  • Better Поддержка браузера
  • Большинство разработчиков использовать
  • Меньше кода, больше вариантов
  • Вы можете использовать INSET тени
  • Вы можете использовать более чем одну тень

Также , есть один example with image, где лучше использовать filter: drop-shadow . Первая имеет прямоугольную тень, а другая имеет тень, которая следует за краем изображения.

Создан 16 авг. 12 2012-08-16 15:17:47 Vukašin Manojlović

Не говоря уже о ужасной поддержки фильтра во всех браузерах . – MetalFrog 16 авг. 12 2012-08-16 16:06:16

Проблема в том, что в настоящее время существует ограниченная поддержка браузера для filter , при этом box-shadow гораздо более поддерживается.

Создан 16 авг. 12 2012-08-16 16:04:06 moettinger

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

Определение и применение

CSS свойство box-shadow добавляет одну или несколько теней к элементу. Для указания нескольких теней необходимо добавить дополнительное значение тени /-ей, разделенных запятыми.

Используя CSS свойство border-radius , вы можете получить тень с закругленными углами. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху), этот принцип используется и у свойства text-shadow .

  • При работе с CSS свойством box-shadow допускается использование в объявлении от двух до четырех числовых значений для одной тени. К обязательным значениям этого свойства относятся только расположение горизонтальной и вертикальной тени. В них допускается использовать отрицательные значения.
  • К необязательным значениям относятся значение цвета тени (по умолчанию черный), радиус размытия (по умолчанию 0, отрицательные значения не допускаются) и размер тени, или радиус растяжения (значение по умолчанию 0).
  • Обращаю Ваше внимание, что если Вы не указываете в своём объявлении необязательные значения, то они установятся в значения по умолчанию (h-shadow v-shadow black 0 0).
Добавить комментарий