面试题：CSS中box-shadow和text-shadow的基本语法及区别

Question

请阐述CSS中box-shadow与text-shadow属性的基本语法，并说明它们在应用场景和效果表现上有哪些区别。

Answer 1

box-shadow属性

1. 基本语法：box-shadow: h-shadow v-shadow blur spread color inset;
   • h-shadow：必需，水平阴影的位置，允许负值。
   • v-shadow：必需，垂直阴影的位置，允许负值。
   • blur：可选，模糊距离。
   • spread：可选，阴影的扩展半径。
   • color：可选，阴影的颜色。
   • inset：可选，将外部阴影（outset）改为内部阴影。
2. 应用场景：常用于为元素（如按钮、卡片等）添加立体效果，使元素在页面上更突出，增加层次感。比如为按钮添加阴影，使其看起来像是悬浮在页面上；或者为卡片添加阴影，区分不同层级的内容。
3. 效果表现：作用于整个元素的边框之外（或内部，如果使用inset关键字），阴影形状与元素的边框形状一致，会根据元素的尺寸和形状进行扩展或收缩。

text-shadow属性

1. 基本语法：text-shadow: h-shadow v-shadow blur color;
   • h-shadow：必需，水平阴影的位置，允许负值。
   • v-shadow：必需，垂直阴影的位置，允许负值。
   • blur：可选，模糊距离。
   • color：可选，阴影的颜色。
2. 应用场景：主要用于为文本添加特殊效果，如使文本看起来更加立体、突出，常用于标题、重要提示性文字等场景，增加文本的视觉吸引力。
3. 效果表现：只作用于文本内容，阴影形状跟随文本的轮廓，不会因为文本容器的大小变化而改变，只与文本本身的形状有关。

区别总结

1. 作用对象：box-shadow作用于整个元素，text-shadow仅作用于文本。
2. 阴影形状：box-shadow取决于元素边框形状，text-shadow取决于文本轮廓。
3. 应用场景侧重点：box-shadow多用于提升元素整体的视觉层次和立体感；text-shadow主要是增强文本的视觉效果，使其更醒目。