Разница между свойствами text-shadow и box-shadow при работе с типографикой заключается в области применения:
- text-shadow устанавливает тень конкретно для текста элемента. 1 Это свойство позволяет добавить тень или несколько теней к тексту. 1
- Box-shadow создаёт тень для элемента в целом. 1 Это свойство универсально и может использоваться на разных элементах, где тень должна следовать за границей элемента. 2
Некоторые особенности свойств:
- text-shadow обычно принимает четыре значения: первое определяет горизонтальное смещение тени, второе — вертикальное, третье — радиус размытия, четвёртое — цвет тени. 1
- Box-shadow имеет пять параметров: горизонтальное и вертикальное смещение, радиус размытия, радиус распространения (необязательно) и цвет тени. 4 Если значение цвета отсутствует, то тень будет того же цвета, что и текст. 4
- Box-shadow может включать впереди необязательное значение inset для размещения тени внутри элемента, а не снаружи. 1
- Если элемент с box-shadow обрезан (с помощью clip-path) или использует маску (с помощью mask), то тень не отображается. 2 Если элемент с text-shadow обрезан, то тень отображается, пока она находится в области обрезки. 2