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 文本效果")