这篇翻译不完整。请帮忙从英语翻译这篇文章

text-shadow为文字添加阴影。可以为文字与  text-decorations  添加多个阴影,阴影值之间用逗号隔开。

语法

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 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;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

This property is specified as a comma-separated list of shadows.

Each shadow is specified as two or three <length> values, followed optionally by a <color>value. The first two <length> values are the <offset-x> and <offset-y> values. The third, optional, <length> value is the <blur-radius>. The<color> value is the shadow's color.

When more than one shadow is given, 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.

取值

<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( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

例子

简单的阴影

.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>
 

规范

Specification Status Comment
CSS Transitions
text-shadow
Working Draft Specifies text-shadow as animatable.
CSS Text Decoration Module Level 3
text-shadow
Candidate Recommendation The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to CSS Text Decoration Module Level 3.

初始值none
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
适用媒体visual
计算值a color plus three absolute lengths
Animation typea shadow list
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 2Edge Full support 12Firefox Full support 3.5
Notes
Full support 3.5
Notes
Notes Firefox versions before 57 have a bug whereby transitions will not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (bug 726550).
Notes From Firefox 4, the blur radius is capped at 300 for performance reasons.
Notes Firefox theoretically supports infinite text-shadows (don't try it).
Notes If the <color> value is unspecified, then Firefox uses the value of the element's color property.
IE Full support 10Opera Full support 9.5
Notes
Full support 9.5
Notes
Notes Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.
Notes Opera 9.5 to 10.1 adheres to the old, reverse painting order (in CSS2, the first specified shadow is on the bottom).
Safari Full support 1.1
Notes
Full support 1.1
Notes
Notes In Safari, any shadows that do not explicitly specify a color are transparent.
Notes Safari 1.1 to 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.
WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

参见

文档标签和贡献者

此页面的贡献者: zhangchen, zhengxinxin, Sebastianz, kevinfszu, FredWe, teoli, yan
最后编辑者: zhangchen,