文本阴影 | text-shadow

该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)	?	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18