css3中给页面文字添加阴影效果,css怎么给文字添加阴影

CSS3中可以通过text-shadow属性给页面文字添加阴影效果。text-shadow属性用于定义文字的阴影效果，可以设置阴影的颜色、位置和模糊程度。

示例代码如下所示：

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

在上述示例中，`h1`元素的文字阴影效果被定义为2像素的水平偏移量、2像素的垂直偏移量，4像素的模糊程度，以及颜色为半透明黑色。

- 水平偏移量：可以通过设置正值使阴影向右偏移，或者通过设置负值使阴影向左偏移。在示例中，文字阴影向右偏移了2像素。

- 垂直偏移量：可以通过设置正值使阴影向下偏移，或者通过设置负值使阴影向上偏移。在示例中，文字阴影向下偏移了2像素。

- 模糊程度：可以通过设置正值来增加阴影的模糊程度，或者设置为0来禁用模糊效果。在示例中，文字阴影的模糊程度为4像素。

- 颜色：可以使用任何有效的CSS颜色值来定义阴影的颜色。在示例中，文字阴影的颜色为半透明的黑色，使用了RGBA颜色表示法。

除了单一的阴影效果，还可以通过在text-shadow属性中使用逗号分隔的多个阴影值来定义多重阴影效果。示例代码如下所示：

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}

在上述示例中，`h1`元素的文字阴影效果被定义为两个阴影值，分别是向右下方偏移的黑色阴影和向左上方偏移的白色阴影。

需要注意的是，text-shadow属性是CSS3新增的属性，因此在一些较旧的浏览器中可能不被支持。为了兼容性考虑，可以通过使用浏览器前缀来为不同浏览器添加相应的属性前缀。

通过使用text-shadow属性可以给页面文字添加阴影效果，可以通过设置水平偏移量、垂直偏移量、模糊程度和颜色来调整阴影效果，还可以通过定义多个阴影值实现多重阴影效果。