CSS text-shadow 屬性

定義和用法

text-shadow 屬性向文本設置陰影。

另請參閱：

CSS3 教程：CSS3 文本效果

HTML DOM 參考手冊：textShadow 屬性

實例

基礎的文本陰影效果：

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

親自試一試

頁面底部有更多實例。

CSS 語法

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

注釋：text-shadow 屬性向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是 0。

屬性值

值 描述 測試
h-shadow 必需。水平陰影的位置。允許負值。 測試
v-shadow 必需。垂直陰影的位置。允許負值。 測試
blur 可選。模糊的距離。 測試
color 可選。陰影的顏色。參閱 CSS 顏色值。 測試

技術細節

默認值： none
繼承性： yes
版本： CSS3
JavaScript 語法： object.style.textShadow="2px 2px #ff0000"

更多實例

帶有模糊效果的文本陰影
該例演示帶有模糊效果的文本陰影。
白色文本上的陰影
本例演示白色文本上的文本陰影。
霓虹燈效果的文本陰影
本例演示帶有霓虹燈效果的文本陰影。

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
4.0 10.0 3.5 4.0 9.6