H5C3--文本阴影text-shadow

最新推荐文章于 2021-12-20 22:55:28 发布

weixin_30375247

最新推荐文章于 2021-12-20 22:55:28 发布

阅读量94

点赞数

原文链接：http://www.cnblogs.com/mrszhou/p/8278347.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .demo{
12             width: 600px;
13             padding: 30px;
14             background-color: #666;
15             margin:20px auto;
16             text-align: center;
17             font:bold 80px/100% "微软雅黑";
18             color: #fff;
19         }
20         /*文本阴影的添加语法：
21         text-shadow(offsetX,offsetY,模糊值大小,颜色)*/
22         .demo1{
23             text-shadow: 5px 5px 5px red;
24         }
25         .demo2{
26             text-shadow: 0px 0px 40px #fff;
27         }
28         .demo3{
29             text-shadow: 0px 0px 30px #fff,0px 0px 50px #f00,0px 0px 70px #fff;
30         }
31         .demo4{
32             text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;
33         }
34     </style>
35 </head>
36 <body>
37 <div class="demo demo1">我是文本阴影</div>
38 <div class="demo demo2">我是文本阴影</div>
39 <div class="demo demo3">我是文本阴影</div>
40 <div class="demo demo4">我是文本阴影</div>
41 </body>
42 </html>

转载于:https://www.cnblogs.com/mrszhou/p/8278347.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30375247

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5C3--文本阴影text-shadow

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 ...
复制链接

扫一扫