Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии