CSS3 text-shadow 属性 · W3School CSS 参考手册

# CSS3 text-shadow 属性 ## 实例基础的文本阴影效果： ``` h1 { text-shadow: 5px 5px 5px #FF0000; } ``` 页面底部有更多实例。 ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流浏览器都支持 text-shadow 属性。注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。 ## 定义和用法 text-shadow 属性向文本设置阴影。 | 默认值： | none | | --- | --- | | 继承性： | yes | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 语法： | _object_.style.textShadow="2px 2px #ff0000" | | --- | --- | ## 语法 ``` text-shadow: _h-shadow_ _v-shadow_ _blur_ _color_; ``` 注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。 | 值 | 描述 | 测试 | | --- | --- | --- | | _h-shadow_ | 必需。水平阴影的位置。允许负值。 | [测试](/tiy/c.asp?f=css_text-shadow) | | _v-shadow_ | 必需。垂直阴影的位置。允许负值。 | [测试](/tiy/c.asp?f=css_text-shadow) | | _blur_ | 可选。模糊的距离。 | [测试](/tiy/c.asp?f=css_text-shadow&p=11) | | _color_ | 可选。阴影的颜色。参阅 [CSS 颜色值](/cssref/css_colors_legal.asp "CSS 合法颜色值")。 | [测试](/tiy/c.asp?f=css_text-shadow&p=13) | ## 亲自试一试 - 实例 [带有模糊效果的文本阴影](/tiy/t.asp?f=css3_text-shadow_blur) 该例演示带有模糊效果的文本阴影。 ``` <!DOCTYPE html> <html> <head> <style> h1 {text-shadow:2px 2px 8px #FF0000;} </style> </head> <body> <h1>模糊效果的文本阴影！</h1> </body> </html> ``` [白色文本上的阴影](/tiy/t.asp?f=css3_text-shadow_white) 本例演示白色文本上的文本阴影。 ``` <!DOCTYPE html> <html> <head> <style> h1 { color:white; text-shadow:2px 2px 4px #000000; } </style> </head> <body> <h1>白色文本的阴影效果！</h1> </body> </html> ``` [霓虹灯效果的文本阴影](/tiy/t.asp?f=css3_text-shadow_neon) 本例演示带有霓虹灯效果的文本阴影。 ``` <!DOCTYPE html> <html> <head> <style> h1 { text-shadow:0 0 3px #FF0000; } </style> </head> <body> <h1>霓虹灯效果的文本阴影！</h1> </body> </html> ``` ## 相关页面 CSS3 教程：[CSS3 文本效果](/css3/css3_text_effect.asp "CSS3 文本效果")