CSS3 text-shadow 屬性

2022-06-02 16:56 更新

實例

基礎(chǔ)的文本陰影效果:

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

親自試一試

頁面底部有更多實例。

瀏覽器支持

IE Firefox Chrome Safari Opera
         

所有主流瀏覽器都支持 text-shadow 屬性。

注釋:Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。

定義和用法

text-shadow 屬性向文本設(shè)置陰影。

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

語法

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

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

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

親自試一試 - 實例

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

相關(guān)頁面

CSS3 教程:CSS3 文本效果

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號