Box-shadow CSS свойство - тень у элемента web-страницы

box-shadow CSS

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

Несколько теней box-shadow

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

Разберем каждый параметр свойства box-shadow по порядку:

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

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

Кроссбраузерный box-shadow

box-shadow: 0 0 15px -10px #ddd inset;
-moz-box-shadow: 0 0 15px -10px #ddd inset;
-webkit-box-shadow: 0 0 15px -10px #ddd inset;
-khtml-box-shadow: 0 0 15px -10px #ddd inset;

Код получается довольно объёмным, для одного стиля. А если представить, что таких элементов на странице будет много... процесс неплохо бы оптимизировать, дабы не заниматься копи-пастом кода. И действительно, нужная технология уже существует - LESS. О ней напишу в следующей статье.