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             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>

 

posted @ 2018-01-13 08:57  QinXiao.Shou  阅读(1245)  评论(0)    收藏  举报