Shadow 中文指南

什么是 Shadow？

在 CSS 中，shadow 并不是一个独立属性，而是指两类常用效果：

• text-shadow：为文字添加阴影
• box-shadow：为元素盒子（如 div、按钮等）添加阴影

合理使用阴影可以增强界面的立体感、突出重点内容，是现代网页设计的重要技巧。

text-shadow 文字阴影

语法：text-shadow: h-offset v-offset blur-radius color;

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

box-shadow 盒子阴影

语法：box-shadow: h-offset v-offset blur-radius spread-radius color inset;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

可添加多个阴影，用逗号分隔；加上 inset 可创建内阴影。

实用技巧

• 使用 rgba 颜色值控制阴影透明度，更自然
• 避免过度使用高模糊或深色阴影，影响可读性
• 移动端注意性能，过多 box-shadow 可能影响渲染效率