目录

CSS text-shadow 属性

❮上一节完整的CSS参考下一节❯

示例

基本文本阴影：

h1 {
text-shadow: 2px 2px #ff0000;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个text-shadow属性为文本添加阴影。

此属性接受要应用于文本的以逗号分隔的阴影列表。

展示演示❯

默认值：	没有任何
遗传：	是的
可动画：	是的。阅读可动画的尝试一下
版本：	CSS3
JavaScript 语法：	对象.style.textShadow="2px 5px 5px red"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
text-shadow	4.0	10.0	3.5	4.0	9.6

CSS 语法

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

笔记：要向文本添加多个阴影，请添加以逗号分隔的阴影列表。

属性值

Value	Description	Demo
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed	Demo ❯
v-shadow	Required. The position of the vertical shadow. Negative values are allowed	Demo ❯
blur-radius	Optional. The blur radius. Default value is 0	Demo ❯
color	Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values	Demo ❯
none	Default value. No shadow	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

提示： 了解有关允许值（CSS 长度单位）的更多信息

更多示例

示例

具有模糊效果的文本阴影：

h1 {
text-shadow: 2px 2px 8px #FF0000;
}

亲自试一试 »

示例

白色文本上的文本阴影：

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

亲自试一试 »

示例

带有红色霓虹灯的文本阴影：

h1 {
text-shadow: 0 0 3px #FF0000;
}

亲自试一试 »

示例

带有红色和蓝色霓虹灯的文本阴影：

h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

亲自试一试 »

相关页面

CSS教程：CSS 文本阴影

HTML DOM 参考：textShadow 属性

❮上一节完整的CSS参考下一节❯