CSS 文本阴影

在 CSS 中，我们可以使用文本阴影为文本添加阴影效果，使其看起来更加立体和有层次感。

CSS text-shadow 属性

text-shadow 属性用于向选定的文本添加阴影效果。它接受一组用逗号分隔的值，每个值定义一个阴影，包括：

• h-shadow：必需，定义阴影水平偏移量。
• v-shadow：必需，定义阴影垂直偏移量。
• blur-radius：可选，定义阴影模糊半径。
• color：可选，定义阴影颜色。

例如，为一个文本添加阴影效果可以这样写：

text-shadow: 2px 2px 2px #000000;

这段代码将会在文本右下方添加一个水平和垂直偏移为 2px 的、模糊半径为 2px 的黑色阴影效果。

多重阴影效果

可以使用逗号分隔多个 text-shadow 值来为一个文本添加多个阴影效果。例如：

text-shadow: 2px 2px 2px #000000, -2px -2px 2px #ff0000;

这段代码将会在文本右下方添加一个黑色阴影，左上方添加一个红色阴影。

兼容性

text-shadow 属性被所有现代浏览器支持，包括 IE9+。因此，使用文本阴影效果不会对浏览器兼容性造成问题。

总结

通过使用 CSS 的 text-shadow 属性，我们可以很容易地为文本添加阴影效果，使其看起来更加立体化和有层次感。多重阴影效果可以为文本添加更多的细节和动态感。由于其兼容性良好，使用文本阴影效果是一个不错的 CSS 技巧。