跳到主要内容

如何设置CSS3文本阴影?

参考答案:

在CSS3中,你可以使用text-shadow属性为文本添加阴影。这个属性接受四个参数:

  1. horizontal-offset:水平阴影的位置。正值将阴影向右移动,负值将阴影向左移动。
  2. vertical-offset:垂直阴影的位置。正值将阴影向下移动,负值将阴影向上移动。
  3. blur-radius:阴影的模糊度。值越大,阴影边缘就越模糊。
  4. color:阴影的颜色。

这是一个text-shadow的基本使用示例:

h1 {
  text-shadow: 2px 2px 4px #000000;
}

在这个例子中,h1元素的文本将有一个向右和向下偏移2px,模糊度为4px,颜色为黑色的阴影。

你还可以添加多个阴影,只需用逗号分隔每个阴影的值即可:

h1 {
  text-shadow: 3px 3px 5px #000000, -1px -1px 5px #ffffff;
}

在这个例子中,h1元素的文本将有两个阴影:一个是向右和向下偏移3px,模糊度为5px,颜色为黑色的阴影;另一个是向左和向上偏移1px,模糊度为5px,颜色为白色的阴影。

注意:不是所有的浏览器都支持text-shadow属性,因此在生产环境中使用时,最好先检查其兼容性。