乐鱼电竞

教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

text-shadow属性怎么用？【CSS3新特性】

更新时间:2023年04月10日11时41分 来源:乐鱼电竞 浏览次数:

好口碑IT培训

text-shadow是CSS3新增属性，该属性可以为页面中的文本添加阴影效果。text-shadow 属性的基本语法格式如下：

选择器{tlhyt-shadow:h-shadow v-shadow blur color;}

在上面的语法格式中，h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置�：刖�，color用于设置阴影颜色。

下面通过一个案例来演示text-shadow属性的用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow属性</title>
<style type="text/css">
p{
  font-size: 50px;
  text-shadow:10px 10px 10px red; /*设置文宇阴影的距离、�：刖逗脱丈�*/
}
. </style>
</head>
<body>
<p>Hello CSS3</p>
 </body>
</html>

上述代码中，第9行代码用于为文字添加阴影效果，设置阴影的水平和垂直偏移距离为10px，�：刖段�10px，阴影颜色为红色。
上述代码，效果如图所示。

1680851391172_阴影效果.png

text-shadow属性

通过图3-21可以看出，文本右下方出现了模糊的红色阴影效果。此外，当设置阴影的水平距离参数或垂直距离参数为负值时，可以改变阴影的投射方向。

注意：

阴影的水平或垂直距离参数可以设为负值，但阴影的�：刖恫问荒苌柚梦担⑶沂翟酱笠跤跋蛲饽：姆段б簿驮酱�。
设置多个阴影叠加效果
我们可以使用text-shadow属性给文字添加多个阴影，从而产生阴影叠加的效果。设置阴影叠加的方法非常简单，我们只需设置多组阴影参数，中间用逗号隔开即可。例如，想要将段落设置红色和绿色阴影叠加的效果，可以将p标签的样式更改为：

P{
font-size:32px;
text-shadow:10px 10px 10px red,20px 20px 20px 
green;/*红色和绿色的投影叠加*/
}

在上面的代码中，为文本依次指定了红色和绿色的阴影效果，并设置了阴影的位置和�：�。阴影叠加效果如下图所示。

1680852909844_多重阴影.png

阴影叠加效果

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】