深入理解 CSS 中的文本阴影效果

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>