如何设置CSS3文本阴影?
参考答案:
在CSS3中,你可以使用text-shadow
属性为文本添加阴影。这个属性接受四个参数:
horizontal-offset
:水平阴影的位置。正值将阴影向右移动,负值将阴影向左移动。vertical-offset
:垂直阴影的位置。正值将阴影向下移动,负值将阴影向上移动。blur-radius
:阴影的模糊度。值越大,阴影边缘就越模糊。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
属性,因此在生产环境中使用时,最好先检查其兼容性。