概述
The text-shadow
property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations
of the element.
Each shadow is specified as an offset from the text, along with optional color and blur radius values.
Multiple shadows are applied front-to-back, with the first-specified shadow on top.
This property applies to both ::first-line
and ::first-letter
pseudo-elements.
text-shadow
为文字添加阴影。可以为文字与 text-decorations
添加多个阴影,阴影值之间用逗号隔开。
每个阴影指定相对文字的偏移量,可选的颜色及模糊半径。
多个阴影从前往后叠加,第一个阴影在最前面。
初始值 | none |
---|---|
适用元素 | all elements. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | yes |
适用媒体 | visual |
计算值 | a color plus three absolute lengths |
是否适用于 CSS 动画 | yes, as a shadow list |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
text-shadow: inherit;
取值
- <color>
- 可选。可以在偏移量之前或之后指定。如果没有指定颜色,则使用UA(用户代理)自行选择的颜色。 Note: 如果想确保跨浏览器的一致性,请明确地指定一种颜色
- <offset-x> <offset-y>
- 必选。这些长度值指定阴影相对文字的偏移量。
<offset-x>
指定水平偏移量,若是负值则阴影位于文字左边。<offset-y>
指定垂直偏移量,若是负值则阴影位于文字上面。如果两者均为0,则阴影位于文字正后方(如果设置了<blur-radius> 则会产生模糊效果
)。
可用单位请查看<length>
。 - <blur-radius>
- 可选。这是
<length>
值。如果没有指定,则默认为0。值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。
形式化语法
none | <shadow-t>#where
<shadow-t> = [ <length>{2,3} && <color>? ]
where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
例子
.red-text-shadow {
text-shadow: red 0 -2px;
}
<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>
.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;
}
<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>
.gold-on-gold {
text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
color: gold;
background: gold;
}
<p class="gold-on-gold">
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>
规范
Specification | Status | Comment |
---|---|---|
CSS Transitions text-shadow |
Working Draft | Lists text-shadow as animatable. |
Unknown text-shadow |
Unknown |
The CSS property text-shadow
was improperly defined in CSS2and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec improved and precised the syntax. Later it was moved to new working draft CSS Text Decoration Module Level 3.
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 2.0.158.0 | 3.5 (1.9.1) | 10 | 9.5 | 1.1 (100) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
- Gecko (Firefox) theoretically supports infinite text-shadows (don't try it).
Gecko 2 and later cap the blur radius at 300 for performance reasons.
If the <color> value is unspecified, then Gecko uses the value of the element'scolor
property. - Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.
Opera 9.5-10.1 adheres to the old, reverse painting order (CSS2, the first specified shadow is on the bottom). - Internet Explorer 5.5 supports Microsoft's Shadow andDropShadow Filter.
- Safari: Any shadows that do not explicitly specify a color are transparent.
Safari 1.1-3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest).
Safari 4.0 (WebKit 528) and later support multiple text-shadows. - Konqueror supports text-shadow starting with version 3.4.