CSS shadow 用法详解

什么是 CSS shadow？

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

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

text-shadow 用法

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

你可以省略模糊半径和颜色，但至少需要水平和垂直偏移。

box-shadow 用法

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

多个阴影可用逗号分隔，实现复杂效果。

实用技巧

• 使用 rgba() 控制阴影透明度，使效果更自然。
• 避免过度使用阴影，以免影响可读性和性能。
• 结合 transition 实现悬停时的动态阴影效果。