Свойство box-shadow
Задает тень для элемента
box-shadow: 0 2px 5px #000;- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
box-shadow: none;
Убирает тень у элемента
box-shadow: 2px 4px;
Задает тень элемента используя два параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y. Цвет тени будет равен цвету текста. Сдвиг по осям может быть как положительным, так и отрицательным числом. Возможные единицы: px, em, rem, vh, vw
<style>
.example-1 {
width: 150px;
height: 150px;
background-color: #eee;
box-shadow: 2px 4px;
}
</style>
<div class="example-1"></div>box-shadow: 2px 4px red;
Задает тень элемента используя три параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y, третий - цвет тени. Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.
<style>
.example-2 {
width: 150px;
height: 150px;
background-color: #eee;
box-shadow: 2px 4px red;
}
</style>
<div class="example-2"></div>box-shadow: 2px 4px 5px #000;
Задает тень элемента используя четыре параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y, третий - размытие тени, четвертый - цвет тени
<style>
.example-3 {
width: 150px;
height: 150px;
background-color: #eee;
box-shadow: 2px 4px 5px #000;
}
</style>
<div class="example-3"></div>box-shadow: 2px 2px 5px 5px #000;
Задает тень элемента используя пять параметров. Первый - сдвиг по оси X, второй - сдвиг по оси Y, третий - размытие тени, четвертый - распространение (увеличение) тени, пятый - цвет тени
<style>
.example-4 {
width: 150px;
height: 150px;
background-color: #eee;
box-shadow: 2px 4px 5px 5px #000;
}
</style>
<div class="example-4"></div>box-shadow: 2px 2px 5px #000 inset;
Используя ключевое слово inset, задает внутреннюю тень элемента
<style>
.example-5 {
width: 150px;
height: 150px;
background-color: #eee;
box-shadow: 2px 2px 5px #000 inset;
}
</style>
<div class="example-5"></div>box-shadow: 2px 2px 5px #000, 2px 2px 5px red;
Задает множество теней для элемента, используя запятую. Возможно задавать сколько угодно теней.
<style>
.example-6 {
width: 150px;
height: 150px;
background-color: #eee;
box-shadow: 2px 2px 5px #000, 2px 2px 5px red;
}
</style>
<div class="example-6"></div>