文本阴影 | 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;

语法

该属性的值为逗号分隔的阴影列表。

每个阴影被指定为两个或三个<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>

规范

浏览器兼容性