text-shadow
摘要
CSS `text-shadow` 属性将一个或多个阴影应用于文本和元素的 <text-decorations>。每个阴影都指定为相对于文本的偏移，以及可选的颜色和模糊半径值。
概述表
- 初始值
无- 适用范围
- 所有元素
- 继承
- 是
- 媒体
- 视觉
- 计算值
- 颜色加上三个绝对长度值
- 可动画
- 是的，作为阴影列表
- CSS 对象模型属性
textShadow- 百分比
- N/A
语法
text-shadow: <blur-radius>text-shadow: <color>text-shadow: <offset-x>text-shadow: <offset-y>text-shadow: none
值
- 无
- 默认值。
- <offset-x>
- 必需。指定文本右侧的水平
<length>值。负水平<length>值会将阴影放置在文本的左侧。 - <offset-y>
- 必需。指定文本下方的垂直
<length>值。负垂直<length>值会将阴影放置在文本的上方。 - <blur-radius>
- 可选。模糊半径是一个
<length>值，指示模糊效果的边界。 - <color>
- 可选。可以在两个阴影效果的
<length>值之前或之后应用颜色值。颜色值将继承为阴影的基础。如果用户未指定颜色，则将使用颜色属性的值代替。
示例
*/ This example uses all four values of the text-shadow property in the following order: <offset-x>, <offset-y>, <blur-radius>, and <color>. /*
p {
text-shadow: 2px 2px 2px grey;
}
*/ This example uses both required offset values, <offset-x> and <offset-y>. The optional <blur-radius> and <color> values have been omitted. /*
p {
text-shadow: -0.1em -0.1em;
}
*/ This example shows multiple shadow effects separated by a comma. Note the use of various units and color models applied to the values. /*
p {
text-shadow: -0.1em -0.1em 1em purple, 3px 3px 0.1em rgba(0, 0, 0, 0.5);
}
用法
The text-shadow property can also be used to draw outlines, bevels, and other effects.
备注
多个阴影从前到后应用，第一个指定的阴影位于最上方。
`text-shadow` 属性适用于 `::first-line` 和 `::first-letter` 伪元素。
相关规范
- CSS Text Decoration Module Level 3
- Working Draft
署名
Mozilla Developer Network
: 文章