CSS⾼级属性之text-shadow详解
1.1 概述
作⽤:
⽴体感
印刷品质感
含义: 设置或检索对象中⽂本的⽂字是否有阴影及模糊效果
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 浏览器⽀持
cssclass属性
表格中的数字注明了完全⽀持该属性的⾸个浏览器版本。
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。