CSS的文字阴影属性text-shadow

CSS的text-shadow属性用于在文本上添加阴影效果。这个属性可以接受一个或多个阴影，每个阴影由其在X轴和Y轴上的偏移量、模糊半径（可选）和颜色值来定义。你可以通过逗号分隔来指定多个阴影。

语法

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

• h-shadow：必需。水平阴影的位置。允许负值。
• v-shadow：必需。垂直阴影的位置。允许负值。
• blur：可选。模糊距离。
• color：必需。阴影的颜色。

示例

单个阴影

p {
  text-shadow: 2px 2px 4px #000000;
}
1
2
3

在这个例子中，文本将有一个向右和向下偏移2px的阴影，阴影的模糊半径为4px，颜色为黑色（#000000）。

多个阴影

h1 {
  text-shadow: 1px 1px 2px #000, 0 0 25px #000, 0 0 5px #fff;
}
1
2
3

在这个例子中，<h1>元素上的文本将有三个阴影效果：

1. 第一个阴影向右和向下偏移1px，模糊半径为2px，颜色为黑色。
2. 第二个阴影没有水平和垂直偏移，但有一个很大的模糊半径（25px），使得阴影看起来像是从文本中心向外扩散的，颜色为黑色。
3. 第三个阴影也没有水平和垂直偏移，但模糊半径较小（5px），颜色为白色，这可以在深色背景上产生轻微的发光效果。

注意事项

• text-shadow属性不会改变文本本身或其布局，只是在其上添加视觉效果。
• 阴影可以是任何颜色，包括RGBA颜色，这允许你创建具有透明度的阴影。
• 在使用多个阴影时，请注意它们的叠加效果，这可能会影响文本的可读性。
• text-shadow在较老的浏览器中可能不受支持，但现代浏览器都支持这个属性。