Свойство CSS3 box-shadow позволяет нам легко добиться эффектов тени слоя. Давайте подробно объясним этот атрибут на практике.
1. Совместимость атрибута box-shadow с браузером. Давайте сначала посмотрим на совместимость этого атрибута с браузером:
Opera: Я не знаю, какую версию она начала поддерживать. Когда я публиковал эту статью для тестирования, я только что обновил Opera до последней версии 10.53, которая уже поддерживает атрибут box-shadow.
Firefox поддерживает это через частное свойство -moz-box-shadow.
Safari и Chrome поддерживают это через частное свойство -webkit-box-shadow.
Поддерживается не всеми IE (не знаю, улучшился ли IE9). Не волнуйтесь, в конце статьи мы представим несколько хаков для IE.
2. Синтаксис атрибута box-shadow
box-shadow имеет шесть настраиваемых значений:
img{box-shadow: Тип тени Смещение по оси X Смещение по оси Y Размер тени Расширение тени Цвет тени}
Если тип тени не установлен, по умолчанию используется эффект тени. Если установлено значение «вставка», это эффект внутренней тени.
Смещение по осям X и Y не эквивалентно, но похоже на «угол» и «положение» в фотошопе.
Размер тени, протяженность, цвет такие же, как в Фотошопе.
3. Анализ примера Давайте рассмотрим эффект box-shadow на нескольких примерах. Сначала создадим простой HTML для тестирования:
<html>
<голова>
<style type="text/css">Напишите здесь часть CSS</style>
</голова>
<тело>
<img src="test.jpg" />
</тело>
</html>
Обратите внимание: чтобы избежать проблем, в приведенном ниже коде CSS написано только box-shadow. При реальном использовании вам также следует писать -moz-box-shadow и -webkit-shadow. То, что вам нужно сделать, очень просто: скопируйте две тени блока и добавьте перед ними -moz- и -webkit-.
изображение {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}
(1) Тень, без смещения, размер тени 10 пикселей, без расширения, цвет #06C.
img{box-shadow:0 0 10px #06C;}
Значением цвета здесь является значение HEX. Мы также можем использовать значение RGBA. Преимущество значения RGBA заключается в том, что оно имеет дополнительное значение альфа-прозрачности, и вы можете управлять прозрачностью тени.
img {box-shadow: 0 0 10px rgba (0, 255, 0, .5)}
(2) Добавьте расширение 20 пикселей к приведенному выше.
img{box-shadow:0 0 10px 20px #06C;}
(3) Внутренняя тень, без смещения, размер 10 пикселей, без расширения, цвет #06C.
img{box-shadow:inset 0 0 10px #06C;}
(4). Множественные теневые эффекты.
Box-shadow можно использовать несколько раз одновременно. Давайте воспользуемся четырехцветной тенью.
img{box-shadow:-10px 0 10px красный, box-shadow:10px 0 10px синий,box-shadow:0 -10px 10px желтый,box-shadow:0 10px 10px зеленый}
(5). Порядок использования нескольких атрибутов тени. При использовании нескольких атрибутов тени для одного элемента необходимо обращать внимание на их порядок. Тень, написанная первой, будет отображаться вверху. Например, в следующем коде мы сначала пишем зеленую тень размером 10 пикселей, а затем пишем тень размером 10 пикселей, но расширенную на 20 пикселей. Результат: слой с зеленой тонировкой поверх слоя с желтой тонировкой.
img{box-shadow:0 0 10px зеленый;box-shadow:0 0 10px 20px желтый}
Но если мы изменим порядок, вот так:
img{box-shadow:0 0 10px 20px желтый,box-shadow:0 0 10px зеленый;}
Мы не сможем увидеть слой с зеленой заливкой, написанный позже, потому что он закрыт желтым слоем, написанным первым, и с большим радиусом.
4. Пусть IE также поддерживает box-shadow
IE сам использует теневой фильтр для достижения подобных эффектов, а также есть несколько хакерских файлов js и .htc, которые могут помочь вам добиться этого эффекта в IE. Я не могу попробовать их все, поэтому здесь я представляю только тот, который использовал сам.
ie-css3.htc — это файл htc, который позволяет браузеру IE поддерживать некоторые свойства CSS3, а не только box-shadow, но также позволяет вашему браузеру IE поддерживать атрибут закругленного угла border-radius и атрибут text-shadow text-shadow .
Как его использовать: скачайте и поместите в каталог вашего сервера.
Напишите следующий код в вашем <head></head>:
<!--[если IE]>
<style type="text/css">
img, #testdiv, .testbox{поведение: URL( http://yourdomain.com/js/ie-css3.htc );}
</стиль>
<![конец]-->
В синей части введите селектор, используя атрибут box-shadow, а в зеленой части введите абсолютный или относительный путь к ie-css3.htc. В любом случае убедитесь, что он доступен.
Тогда все в порядке. Но есть еще несколько вещей, на которые следует обратить внимание:
Когда вы используете этот файл htc, если в вашем CSS записано box-shadow, -moz-box-shadow или -webkit-box-shadow, IE отобразит его.
При использовании этого файла htc вы не можете писать box-shadow: 0 0 10px red, но box-shadow: 0px 0px 10px red; иначе в IE произойдет сбой;
Альфа-прозрачность в значениях RGBA не поддерживается.
Вставленные внутренние тени не поддерживаются.
Теневое расширение не поддерживается.
В IE тени будут отображаться только черными, независимо от того, какие другие цвета вы для них установили.
Таким образом, этот скрипт позволяет IE поддерживать только некоторые значения box-shadow. Если у вас есть другие сценарии взлома IE получше, оставьте сообщение, чтобы поделиться им.