1.1 概述
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow
作用:
- 立体感
- 印刷品质感
含义: 设置或检索对象中文本的文字是否有阴影及模糊效果
- none: 无阴影
- length ①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- length ②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- length ③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- color : 设置对象的阴影的颜色
语法:
text-shadow: h-shadow v-shadow blur color;
注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
1.2 浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
1.3 示例
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
/*简单阴影*/
.red-text-shadow {
text-shadow: red 0 -2px;
}
/*多重阴影*/
.white-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
<h1>白色文本的阴影效果!</h1>
<p class="red-text-shadow">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
<p class="white-with-blue-shadow">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>