Box-shadow CSS - тень элемента

box-shadow CSS

Свойство box-shadow позволяет задать тень для блочного элемента, на веб-странице. До появления CSS3, это была трудная задача для начинающего верстальщика, но теперь все решается одной строчкой кода.

box-shadow: 0 0 20px 5px #bbb inset;


Разберем каждый параметр по порядку

  • Cдвиг тени по X-оси. Положительное значение - сдвиг по горизонтали вправо, отрицательное - влево.
  • Сдвиг тени по Y-оси. Положительное значение - сдвиг по вертикали вниз, отрицательное - вверх.
  • Степень размытия тени. Ноль или отрицательное значение не даст никакого эффекта.
  • Размер относительно родительского элемента. По умолчанию - тот же размер, что и родитель. Положительное значение увеличивает тень, отрицательное - сжимает.
  • Цвет тени.
  • И последний, не обязательный параметр - inset. Думаю из названия понятно, что он определяет. Правильно, - тень внутри элемента. Можно изобразить красивый эффект глубины.


Результат применения:

box-shadow пример

Полный код примера:

.box {
    width: 60%;
    height: 40%;
    background: rgba(245, 255 ,225, .55);
    border: 10px solid #eee;
    box-shadow: 0 0 20px 5px #bbb inset;
}



При желании, можно использовать несколько теней. При этом, первая тень из списка будет верхним слоем по Z-оси. Параметры теней задаются через запятую, например, так:

box-shadow: 10px 10px 10px 10px #abc inset, 10px 10px 10px 10px #eee;


Не стоит забывать об одной особенности, свойство border-radius оказывает влияние на box-shadow - углы тени также получатся округлыми.

box-shadow + border-radius