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在较老的浏览器中可能不受支持，但现代浏览器都支持这个属性。