CSS 参考手册 目录

CSS3 text-shadow 属性

text-shadow 属性用于为文本添加阴影效果。该属性接受一个或多个值,每个值表示一个阴影效果。

语法

------------ -------- -------- ----------- ------
  • h-shadow:水平阴影的位置。可正负值,正值表示阴影向右偏移,负值表示阴影向左偏移。
  • v-shadow:垂直阴影的位置。可正负值,正值表示阴影向下偏移,负值表示阴影向上偏移。
  • blur-radius:模糊半径。可选参数,表示阴影的模糊程度。值越大,阴影越模糊。
  • color:阴影的颜色。可选参数,表示阴影的颜色。

示例

----- -
  ------------ --- --- --- ------- -- -- -----
-

在上面的示例中,文本添加了一个水平偏移为 2px,垂直偏移为 2px,模糊半径为 4px,颜色为半透明黑色的阴影效果。

多重阴影

text-shadow 属性还支持多重阴影效果,可以通过逗号分隔多个阴影值来实现。

----- -
  ------------ --- --- --- ------- -- -- ----- ---- ---- --- --------- ---- ---- -----
-

上面的示例中,文本同时添加了两个阴影效果,一个是黑色的阴影向右下偏移,另一个是白色的阴影向左上偏移。

text-shadow 属性是一个非常有趣且实用的 CSS 属性,可以为文本增添立体感和视觉效果,同时也可以用来制作一些炫酷的效果。


上一篇:CSS 属性 text-overflow
下一篇:CSS 属性 text-transform