text-shadow
CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its
decorations
.
Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.
/* 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>
。
<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>
Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.
<offset-x> <offset-y>
<length>
values specify the shadow's distance from the text.
<offset-x>
specifies the horizontal distance; a negative value places the shadow to the left of the text.
<offset-y>
specifies the vertical distance; a negative value places the shadow above the text. If both values are
0
, the shadow is placed directly behind the text, although it may be partly visible due to the effect of
<blur-radius>
.
<blur-radius>
<length>
value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to
0
.
| 初始值 |
none
|
|---|---|
| 适用于 |
所有元素。它还适用于
::first-letter
and
::first-line
.
|
| 继承 | yes |
| 计算值 | a color plus three absolute lengths |
| 动画类型 | a shadow list |
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.</p>
.white-text-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, serif;
}
<p class="white-text-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.</p>
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Text Decoration Module Level 3
The definition of 'text-shadow' in that specification. |
候选推荐 |
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
.
|
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-shadow
|
Chrome 完整支持 2 | Edge 完整支持 12 |
Firefox
完整支持
3.5
注意事项
|
IE 完整支持 10 |
Opera
完整支持
9.5
注意事项
|
Safari
完整支持
1.1
注意事项
|
WebView Android 完整支持 37 | Chrome Android 完整支持 18 |
Firefox Android
完整支持
4
注意事项
|
Opera Android 完整支持 14 |
Safari iOS
完整支持
1
注意事项
|
Samsung Internet Android 完整支持 1.0 |
完整支持
见实现注意事项。
transition
s will not work when transitioning from a
text-shadow
with a color specified to a
text-shadow
without a color specified (
bug 726550
). This has been fixed in Firefox's new parallel CSS engine (also known as
Quantum CSS
or
Stylo
, planned for release in Firefox 57).
box-shadow
<color>
data type (for specifying the shadow color)