Свойство CSS box-shadow
Свойство box-shadow позволяет добавлять несколько теней вокруг элемента, указывая значения для горизонтального смещения, вертикального смещения, радиуса размытия, радиуса расширения, цвета и ключевого слова inset.
Свойство box-shadow является одним из свойств CSS3.
Вы можете добавлять несколько эффектов, разделяя их запятыми. Если для элемента с тенью задан border-radius, тень будет иметь такие же скругленные углы.
Это два значения, задающие смещение тени. h-offset указывает горизонтальное расстояние. Положительные значения размещают тень справа от элемента, отрицательные — слева. v-offset указывает вертикальное расстояние. Положительное значение размещает тень под элементом, отрицательное — над ним. Если оба значения равны 0, тень появляется прямо за элементом.
Третье значение — радиус размытия. Оно необязательно. Чем больше число, тем больше и светлее становится размытие. Отрицательные значения недопустимы. Если значение опущено или равно 0, край тени будет четким.
Четвертое значение — радиус расширения. Он необязателен. Положительные значения заставляют тень расширяться, а отрицательные — сужаться. Если значение опущено или равно 0, тень будет того же размера, что и элемент.
Пятое значение — цвет. Он необязателен. Если значение опущено, тень по умолчанию принимает вычисленный цвет текста элемента.
Шестое значение — ключевое слово inset. Оно необязательно и может располагаться в любом месте определения тени. При его наличии создается внутренняя тень вместо внешней.
| Initial Value | none |
|---|---|
| Applies to | Всем элементам. Также применяется к ::first-letter. |
| Inherited | Нет. |
| Animatable | Да. Тень блока можно анимировать. |
| Version | CSS3 |
| DOM Syntax | object.style.boxShadow = "15px 25px 35px gray"; |
Синтаксис
Синтаксис свойства CSS box-shadow
box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;Попробуем добавить тень к элементу.
Пример свойства box-shadow:
Пример свойства CSS box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: 5px 4px 10px #1c87c9;
}
</style>
</head>
<body>
<h2>Box-shadow example</h2>
<div></div>
</body>
</html>Результат
Несколько теней
Вы можете указывать несколько теней через запятую. Например, использование приведенного ниже кода создаст 3 тени с разными цветами и позициями для одного элемента.
Пример использования свойства box-shadow для добавления нескольких теней к элементу:
Пример свойства CSS box-shadow с несколькими значениями
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
height: 100px;
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
}
</style>
</head>
<body>
<h2>Multiple shadows with box-shadow.</h2>
<div></div>
</body>
</html>Результат
Теперь добавим элементу значение inset. Оно создает тень внутри блока.
Пример свойства box-shadow со значением "inset":
Пример свойства CSS box-shadow со значением inset
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
}
</style>
</head>
<body>
<h2>Box-shadow with inset value</h2>
<div></div>
</body>
</html>Результат
Тень с одной стороны
Чтобы создать тень, которая появляется только с одной стороны блока, используйте отрицательное значение радиуса расширения.
Свойство CSS box-shadow
.shadow {
box-shadow: 0 10px 8px -4px yellow;
}Пример свойства box-shadow с отрицательным значением радиуса расширения:
Пример свойства box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
.shadow {
width: 100px;
height: 100px;
box-shadow: 0 10px 8px -4px yellow;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| none | Тень не задана. | Запустить » |
| h-offset | Обязательно. Горизонтальное смещение тени. Положительное значение размещает тень справа от блока, отрицательное — слева. | Запустить » |
| v-offset | Обязательно. Вертикальное смещение тени. Положительное значение размещает тень под блоком, отрицательное — над ним. | Запустить » |
| blur-radius | Необязательно. Тень размывается. Чем больше число, тем сильнее размытие. Отрицательные значения недопустимы. | Запустить » |
| spread-radius | Необязательно. Тень расширяется/сужается. Положительное значение увеличивает размер тени, отрицательное — уменьшает. | Запустить » |
| color | Необязательно. Цвет тени. Если опущено, по умолчанию используется цвет текста элемента. | Запустить » |
| inset | Необязательно. Ключевое слово, которое можно указать в любом месте определения тени. Превращает внешнюю тень во внутреннюю. | Запустить » |
| initial | Устанавливает свойству его значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие свойства можно настроить при задании box-shadow в CSS?