文本阴影 | text-shadow (Text Decoration) - CSS 中文开发手册
该text-shadowCSS属性向文本添加阴影。它接受一个以逗号分隔的阴影列表，应用于文本和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;
| Initial value | none |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Media | visual |
| Computed value | a color plus three absolute lengths |
| Animation type | a shadow list |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
该属性的值为逗号分隔的阴影列表。
每个阴影被指定为两个或三个<length>值，每个<length>值后可以选择性地加上一个<color>值。前两个<length>值是<offset-x>和<offset-y>值。第三，可选的<length>值是<blur-radius>。<color>属性的值是阴影的颜色。
当给出多个阴影时，阴影按定义顺序从前往后应用，最先指定的阴影在最上方。
此属性同时适用于::first-line和::first-letter伪元素...
可能值
<color>——可选。阴影的颜色。它可以在偏移值之前或之后指定。如果未指定，颜色的值就留给用户代理指定，所以当需要保证跨浏览器的一致性时，应该明确地定义它。
<offset-x> <offset-y>——必须。这些<length>值指定了阴影与文本的距离。
<offset-x>——指定水平距离; 如果为负值，则表示将阴影放在文本的左侧。
<offset-y>——指定垂直距离; 如果为负值，则表示将阴影置于文本上方。如果两个值都是0，则阴影直接放置在文本的后面，虽然它可能由于<blur-radius>的效果而部分可见。
<blur-radius>——可选。这是一个<length>值。值越大，模糊程度越大， 阴影变得越宽。如果未指定，则默认为0。
形式语法
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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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> 规范
| Specification | Status | Comment |
|---|---|---|
| CSS TransitionsThe definition of 'text-shadow' in that specification. | Working Draft | Specifies text-shadow as animatable. |
| CSS Text Decoration Module Level 3The definition of 'text-shadow' in that specification. | 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. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 2.0 | (Yes) | 3.5 (1.9.1)1 | 103 | 9.52 | 1.1 (100)4 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | ? | ? | ? | ? |