CSS3 text-shadow 属性
说明
text-shadow CSS 属性将一种或多种文本阴影效果应用于元素的文本内容。 每个文本阴影效果都必须指定阴影偏移量，并且可以选择指定模糊半径和阴影颜色。
下表总结了此属性的使用上下文和版本历史记录。
| 默认值： | none |
|---|---|
| 适用于： | 所有元素。 它也适用于 |
| 继承： | Yes |
| 动画： | Yes. 参见动画属性。 |
| 版本： | New in CSS3 |
使用说明
- 文本阴影效果按指定的顺序应用，因此可能会相互叠加，但它们永远不会叠加文本本身。
- 可以选择在阴影偏移值之后指定模糊半径； 它是一个长度值，代表模糊效果的大小。
- 可以选择在偏移长度值之前或之后指定阴影的颜色值。 如果没有为阴影指定颜色，则将使用 CSS
color属性的值。
语法
属性的语法如下：
| text-shadow: |
shadow1 [, shadow2, ... shadowN] | none | inherit where shadow is: [offset-x offset-y blur-radius color] |
下面的例子展示了 text-shadow 属性的作用。
h1 {
text-shadow: 2px 2px 5px #000;
}
p {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}注意：如果两个阴影偏移值都设置为0，那么阴影放在文本后面，并且在指定blur-radius时可能会产生模糊效果。
属性值
下表描述了该属性的值。
| 值 | 说明 |
|---|---|
| Required — 必须为该属性指定以下值。 | |
| h-shadow | 指定文本右侧的水平距离。 负的水平长度值将阴影放置在文本的左侧。 |
| v-shadow | 指定文本下方的垂直距离。 负的垂直长度值将阴影放置在文本上方。 |
| Optional — 以下值是可选的。 | |
| blur | 指定模糊大小。 |
| color | 指定阴影的颜色。 查看 CSS 颜色值 以获取可能的颜色值列表。 |
inherit |
如果指定，则关联元素采用其父元素 text-shadow 属性的 计算值。 |
浏览器兼容性
所有主要的现代浏览器都支持 text-shadow 属性。
 |
基本支持—
|
进一步阅读
请参阅以下教程： CSS 文本.
文本相关属性： letter-spacing, text-align, text-decoration, text-indent, text-overflow, text-transform, white-space, word-spacing.
Advertisements