Box-shadow • За CSS
Свойството box-shadow ви позволява да добавяте една или повече сенки към елементи.
Синтаксисът е много прост:
Този код ще даде сянка като тази:
Първата стойност е отговорна за левия отстъп, а втората - отгоре Стойностите могат да бъдат отрицателни. Третото е радиусът на размазване. Ако стойността не е посочена или равна на 0, сянката има остри ръбове. Четвъртото е да намалите или увеличите сянката. Стойностите могат да бъдат отрицателни.
За съжаление стойностите на предишните свойства не могат да бъдат зададени като процент.
Последната стойност е цвят. Много е удобно да го зададете в hsla или rgba, така че сянката да е прозрачна и да затъмнява основния фон, независимо от цвета му.
Няма начин да предефинирате само цвета на сянката, за това трябва да дублирате всички стойности.
Има още един параметър - вложка. Ако е зададена, сянката се хвърля вътре в елемента.
Когато използвате множество сенки, те се задават една след друга, разделени със запетаи.
За разлика от градиентите, сенките са анимирани, така че в някои случаи те могат да се използват вместо градиенти.