Skip to main content

文字阴影 text-shadow

Docs

文字阴影​

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

/* 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）。

语法​

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

规范​

CSS Text Decoration Module Level 3 (w3c.github.io)

w3c_text-shadow

示例​

Loading Github Gist ...
Loading Github Gist ... 
/* 向右 1px 向下 1px 模糊半径 2px 阴影颜色 black */
text-shadow: 1px 1px 2px black;
/* 模糊半径 1em 阴影颜色 blue */
text-shadow: 0 0 1em blue;
/* 模糊半径 0.2em 阴影颜色 blue */
text-shadow: 0 0 0.2em blue;