文本阴影 | text-shadow (Text Decoration) - CSS 中文开发手册 - Break易站

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

语法

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

每个阴影被指定为两个或三个值，每个值后可以选择性地加上一个值。前两个值是和值。第三，可选的值是。属性的值是阴影的颜色。

当给出多个阴影时，阴影按定义顺序从前往后应用，最先指定的阴影在最上方。

此属性同时适用于::first-line和::first-letter伪元素...

可能值

——可选。阴影的颜色。它可以在偏移值之前或之后指定。如果未指定，颜色的值就留给用户代理指定，所以当需要保证跨浏览器的一致性时，应该明确地定义它。

——必须。这些值指定了阴影与文本的距离。

——指定水平距离; 如果为负值，则表示将阴影放在文本的左侧。

——指定垂直距离; 如果为负值，则表示将阴影置于文本上方。如果两个值都是0，则阴影直接放置在文本的后面，虽然它可能由于的效果而部分可见。

——可选。这是一个值。值越大，模糊程度越大， 阴影变得越宽。如果未指定，则默认为0。

形式语法

none | #where 
 = [ {2,3} && ? ]
where 
 =  |  |  |  |  |  | currentcolor | 
where 
 = rgb( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = rgba( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = hsl( [  [ /  ]? ] | [ , , , ? ] )
 = hsla( [  [ /  ]? ] | [ , , , ? ] )
where 
 =  |  =  | 

实例

简单阴影

.red-text-shadow {
  text-shadow: red 0 -2px;
}

Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.

多重阴影

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

Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.

规范

浏览器兼容性