文本阴影 CSS

CSS 可以为文本添加阴影效果，以提升文字的可读性和美观度。本文介绍了 CSS 中实现文本阴影的属性，以及如何使用它们。

text-shadow 属性

text-shadow 是 CSS 中用于为文本添加阴影的属性。它是一个简单的属性，只需指定阴影的偏移量、模糊半径和颜色即可。

text-shadow: h-shadow v-shadow blur-radius color;

h-shadow 和 v-shadow 分别指定了阴影的水平和垂直偏移量，单位可以是 px、em 或百分比。例如：偏移量为 2px 和 1px 的阴影可以这样写：

text-shadow: 2px 1px 0 #000;

blur-radius 指定了阴影的模糊半径，其值越大，阴影就越模糊，越小则越清晰。

color 指定了阴影的颜色。可以使用 HTML 颜色名称、十六进制颜色值、RGB、RGBA、HSL 和 HSLA 等方式指定颜色。例如：颜色为红色的阴影可以这样写：

text-shadow: 2px 1px 0 red;

多个阴影可以使用逗号分隔，例如：

text-shadow: 2px 1px 0 red, -2px -1px 0 blue;

box-shadow 属性

除了 text-shadow 属性，还有一个重要的属性 box-shadow 也可以为盒子（包括文本）添加阴影。box-shadow 属性的使用方法与 text-shadow 相似，也是指定阴影的偏移量、模糊半径和颜色。

box-shadow: h-shadow v-shadow blur-radius spread-radius color;

与 text-shadow 不同的是，box-shadow 还可以指定阴影的扩展半径（spread-radius），其含义是阴影与元素的距离。当扩展半径为正数时，阴影会变大，为负数时，阴影会缩小。例如：模糊半径为 5px、扩展半径为 10px 的红色阴影可以这样写：

box-shadow: 0 0 5px 10px red;

box-shadow 属性同样支持多重阴影，只需使用逗号分隔即可。例如：

box-shadow: 0 0 5px 10px red, 0 0 10px 5px blue;

同时，可以使用 inset 关键字将阴影设为内阴影，例如：

box-shadow: inset 0 0 5px 10px red;

总结

本文介绍了 CSS 中实现文本阴影的两个属性：text-shadow 和 box-shadow，它们分别用于为文本和盒子添加阴影。通过设置阴影的偏移量、模糊半径、颜色和扩展半径，可以制作出多种不同的阴影效果。