CSS | text-shadow 属性

介绍

text-shadow属性指定在文字后面绘制阴影效果。该属性接受长度值和颜色值等参数，可以用来为文字增加立体感和视觉效果。

语法

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow：指定阴影横向的长度值，可以是正数、负数或0。
• v-shadow：指定阴影纵向的长度值，可以是正数、负数或0。
• blur-radius：指定阴影的模糊范围，可以是正数或0。0表示阴影与文字直接连接，越大则越模糊。
• color：指定阴影的颜色，可以是预定义的颜色名、RGB值或十六进制颜色值。

示例

/* 给文字添加黑色阴影，横向和纵向长度为0，模糊范围为5px */
text-shadow: 0 0 5px black;

/* 给文字添加红色阴影，横向和纵向长度均为2px，模糊范围为0，与文字紧密连接 */
text-shadow: 2px 2px 0 red;

/* 给文字添加带有透明度的阴影 */
text-shadow: 0 0 5px rgba(0,0,0,0.5);

注意事项

• text-shadow属性不是必需的，如果不设置，则文字不会显示阴影效果。
• 如果同时定义多个阴影效果，则用逗号将它们分隔开，如：text-shadow: 2px 2px 1px #000, -2px -2px 1px #FFF;。
• text-shadow属性只适用于块级元素和行内块元素，不适用于行内元素。