Свойство box shadow применяет тень с указанными вами параметрами к контейнеру box model, соответствующему селектору, который вы написали в CSS. Можно поиграть с селектором здесь.
Свойство text shadow применяет тень ко всем текстовым узлам внутри div, который соответствует вашему селектору css. Можно поиграть с селектором здесь.
В этих двух селекторах есть большая глубина, с которой вы, возможно, еще не столкнулись, поэтому я хотел рассказать о нескольких интересных случаях использования свойств тени текста и блока.
1. Эффект карты!
Поскольку оба этих свойства могут принимать несколько аргументов, разделенных запятой, вы можете легко дублировать div (с точки зрения отображения) без добавления HTML. (ссылка)
2. Отрицательное заполнение, расширенный div
Когда вам нужно расширить фон вашего div за пределы div и на фон родителя, у вас не так много вариантов, когда дело доходит до традиционной блочной модели. Коробчатая тень, установленная без смещения, и большой разброс могут помочь вам в этом. (ссылка)
box-shadow: 0px 0px 0px $padding brown;
3. Текстовые эффекты
Текстовые эффекты могут придать вашему пользовательскому интерфейсу действительно крутой вид. Есть много способов использовать свойство text-shadow, чтобы придать вашему тексту сумасшедшие эффекты.
Спасибо за чтение!
Заслуга вдохновения принадлежит Стиву Гриффиту.
