css3-11 如何设置文字的阴影
一、总结
一句话总结:text-shadow属性。text-shadow:3px 3px 3px #f0f;
1、text-shadow属性的参数依次是什么意思?
水平及垂直偏移
模糊距离(这个参数相当于ps里面的羽化半径)
颜色
2、所有阴影类的属性必备的三个属性是什么(带上颜色是四个)?
水平及垂直偏移
模糊距离(这个参数相当于ps里面的羽化半径)
二、如何设置文字的阴影
1、相关知识
文本样式:
1.text-shadow
text-shadow:3px 3px 3px #f0f;
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>