css中的多样化文本阴影：text-shadow

最新推荐文章于 2024-04-07 19:38:19 发布

june_ruikang

最新推荐文章于 2024-04-07 19:38:19 发布

阅读量1.4k

点赞数

分类专栏： CSS-基础

本文链接：https://blog.csdn.net/june_ruikang/article/details/50997418

版权

CSS-基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*text-shadow：添加多样化的文本阴影*/
/*text-shadow：length||length||opacity||color：左右偏移距离||上下偏移距离||模糊度||阴影颜色*/
p[lang="a"]{
font-family: "微软雅黑";
font-weight: 100px;
font-size: 100px;
color: #DC143C;
text-shadow: 20px 50px 30px blue;
}
/*设置描边效果*/
p[lang="b"]{
font-family: "微软雅黑";
font-weight: bold;
font-size: 130px;
color: beige;
text-shadow: -3px 0 blue,/*左阴影*/
0 -3px blue,/*上阴影*/
3px 0 blue,/*右阴影*/
0 3px blue;/*下阴影*/
}
/*凹陷效果：右和下设为黑色*/
p[lang="c"]{
font-family: "微软雅黑";
font-weight: bold;
font-size: 130px;
color: beige;
text-shadow: -3px 0 blue,/*左阴影*/
0 -3px blue,/*上阴影*/
3px 0 black,/*右阴影*/
0 3px black;/*下阴影*/
}
/*凸起效果：右和下设为白色*/
p[lang="d"]{
font-family: "微软雅黑";
font-weight: bold;
font-size: 130px;
color: beige;
text-shadow: -3px 0 blue,/*左阴影*/
0 -3px blue,/*上阴影*/
3px 0 azure,/*右阴影*/
0 3px azure;/*下阴影*/
}
/*文本的发光效果:没有偏移的模糊设置就是发光*/
p[lang="e"]{
font-family: "微软雅黑";
font-weight: bold;
font-size: 130px;
color: beige;
text-shadow: 0 0 10px black;
}
</style>
<body>
阴影属性
test-shadow

 
阴影属性
test-shadow

阴影属性
test-shadow

阴影属性
test-shadow

阴影属性
test-shadow

</body>

</html>