text-shadow

text-shadow CSS 属性为文本添加阴影。它接受一个逗号分隔的阴影列表，这些阴影将应用于文本及其任何装饰。每个阴影都由元素的 X 和 Y 偏移量、模糊半径和颜色的一些组合来描述。

试一试

语法

css
/* 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: revert;
text-shadow: revert-layer;
text-shadow: unset;

此属性指定为一个逗号分隔的阴影列表。

每个阴影指定为两个或三个<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
应用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承是
计算值一种颜色加上三个绝对长度
动画类型一个 阴影列表

正式语法

text-shadow = 
  none                            |
  [ <color>? && <length>{2,3} ]#

示例

简单阴影

css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
html
<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>

多重阴影

css
.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;
}
html
<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 文本装饰模块级别 3
# text-shadow 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅