1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 属性
  5. text-shadow

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

text-shadow

基线 广泛可用

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

text-shadow 为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

尝试一下

text-shadow: 1px 1px 2px pink;

text-shadow: #fc0 1px 0 10px;

text-shadow: 5px 5px #558abb;

text-shadow: red 2px 5px;

text-shadow: 5px 10px;

text-shadow:
  1px 1px 2px red,
  0 0 1em blue,
  0 0 0.2em blue;

<section id="default-example">
  <p id="example-element">
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy...
  </p>
</section>

p {
  font:
    1.5em Georgia,
    serif;
}

语法

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: unset;

当阴影大于一个时要用逗号区别开阴影之间的参数。

每个阴影都有两到三个 <length> 参数，以及一个与阴影颜色相关的 <color> 参数。前两个 <length> 参数，是以“文字中心”为原点的坐标轴，分别为 x 轴 <offset-x> 和 y 轴 <offset-y> 的值；如果有第三个 <length> 参数，则第三个数值为形成阴影效果的半径的数值 <blur-radius>。

当所给的阴影大于一个时，阴影应用的顺序为从前到后，第一个指定的阴影在顶部。

这个属性同时适用于 ::first-line 以及 ::first-letter 伪元素。

值

<color>

可选。阴影的颜色。可以在偏移量之前或之后指定。如果没有指定颜色，则使用用户代理自行选择的颜色，因此需要跨浏览器的一致性时，应该明确定义它。

<offset-x> <offset-y>

必选。这些 <length> 值指定阴影相对文字的偏移量。<offset-x> 指定水平偏移量，若是负值则阴影位于文字左侧。<offset-y> 指定垂直偏移量，若是负值则阴影位于文字上方。如果两者均为 0，则阴影位于文字正后方，如果设置了 <blur-radius> 则会产生模糊效果。

<blur-radius>

可选。这是 <length> 值。如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。

形式定义

初始值none
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性是
计算值a color plus three absolute lengths
动画类型a shadow list

形式语法

text-shadow = 
  none       |
  <shadow>#  

<shadow> = 
  <color>?                                       &&
  [ <length>{2} [ <length [0,∞]> <length>? ]? ]  &&
  inset?

示例

简单的阴影

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
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

多重阴影

css
.white-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    "Bitstream Charter",
    "URW Bookman L",
    "Century Schoolbook L",
    serif;
}
html
<p class="white-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
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

规范

规范
CSS Text Decoration Module Level 3
# text-shadow-property

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题