如何设置文字的阴影

如何设置文字的阴影？

 

转载自https://www.cnblogs.com/Renyi-Fan/p/9262595.html

  一、总结（点击显示或隐藏总结内容）

一句话总结：text-shadow属性。text-shadow:3px 3px 3px #f0f;

 

1、text-shadow属性的参数依次是什么意思？

水平及垂直偏移

模糊距离（这个参数相当于ps里面的羽化半径）

颜色

 

 

2、所有阴影类的属性必备的三个属性是什么（带上颜色是四个）？

水平及垂直偏移

模糊距离（这个参数相当于ps里面的羽化半径）

 

 

 

二、如何设置文字的阴影

 

1、相关知识

文本样式:
1.text-shadow
text-shadow:3px 3px 3px #f0f;

语法

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值描述测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊的距离。 测试
color 可选。阴影的颜色。参阅 CSS 颜色值。 测试

 

2、代码

 

文字的阴影

复制代码
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         
11         p{
12             text-shadow:3px 3px 3px #00f;
13         }    
14     </style>
15 </head>
16 <body>
17     <div>
18         <p>linux is very much!</p>
19         <p>linux is very much!</p>
20         <p>linux is very much!</p>
21         <p>linux is very much!</p>
22         <p>linux is very much!</p>
23     </div>
24 </body>
25 </html>
复制代码
 

posted on 2019-09-06 21:35  死磕&到底  阅读(948)  评论(0)    收藏  举报

导航