加氢站个公司好百度关键词指数查询工具
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 illoinventore 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 inventoreveritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
