CSS shadow 用法详解

什么是 CSS shadow？

CSS 提供了两种主要的阴影属性：

• 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;

其中 inset 是可选值，表示内阴影。

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

box-shadow: inset 3px 3px 6px rgba(0,0,0,0.4);

实用技巧

• 多个阴影可用逗号分隔，实现复杂效果。
• 使用 rgba 控制阴影透明度，使效果更自然。
• 避免过度使用阴影，以免影响可读性和性能。