什么是 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 可能影响渲染效率