Тег box-shadow в CSS: опис, синтаксис і приклад використання
Короткий опис
Тег box-shadow в CSS дозволяє додавати тінь до елементу. Можна використовувати кілька тіней, вказуючи їх параметри через кому. Додавання тіні збільшує ширину елемента, що може призвести до появи горизонтальної полоси прокрутки в браузері.
Синтаксис
box-shadow: none | <тінь> [,<тінь>]*
де <тінь>:
inset <зсув за x> <зсув за y> <радіус розмиття> <розтягнення> <колір>
Значення
- none
- Скасовує додавання тіні.
- inset
- Тінь відображається всередині елемента. Необов'язковий параметр.
- зсув за x
- Зсув тіні по горизонталі відносно елемента. Позитивне значення цього параметра задає зсув тіні праворуч, від'ємне — ліворуч. Обов'язковий параметр.
- зсув за y
- Зсув тіні по вертикалі відносно елемента. Позитивне значення задає зсув тіні вниз, від'ємне — вгору. Обов'язковий параметр.
- розмиття
- Задає радіус розмиття тіні. Чим більше це значення, тим сильніше тінь розмазується, стає ширшою і світліше. Якщо цей параметр не задано, за замовчуванням встановлюється 0, тінь при цьому буде чіткою, а не розмитою.
- розтягнення
- Позитивне значення розтягує тінь, від'ємне, навпаки, стискає її. Якщо цей параметр не задано, за замовчуванням встановлюється 0, при цьому тінь буде того ж розміру, що й елемент.
- колір
- Колір тіні у будь-якому доступному форматі CSS, за замовчуванням тінь чорна. Необов'язковий параметр.
Дозволяється вказувати кілька тіней, розділяючи їх параметри комою. Перша тінь у списку розміщується найвище, остання у списку — найнижче.
Приклад використання
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow</title>
<style>
.shadow {
background: #fc0; /* Колір фону */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметри тіні */
padding: 10px;
}
</style>
</head>
<body>
<div class="shadow">В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!</div>
</body>
</html>Браузери
Safari до версії 5.1, Chrome до версії 10.0, Android до версії 4.0 і iOS Safari до версії 5.0 підтримують властивість -webkit-box-shadow.
Firefox до версії 4.0 підтримує властивість -moz-box-shadow.
Internet Explorer до версії 9.0 не підтримує властивість box-shadow, замість цього можна використовувати нестандартну властивість filter:
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);Тут: offX — зсув тіні по горизонталі; offY — зсув тіні по вертикалі; color — колір тіні.
Використання фільтра dropshadow дає чітку різку тінь, тому для ефекту розмиття можна використовувати фільтр shadow.
filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);Тут: direction — кут напряму тіні від 0 до 360°; color — колір тіні; strength — зсув тіні в пікселях.