CSS3 text-shadow 屬性

2022-06-02 16:56 更新

實(shí)例

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

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

親自試一試

頁(yè)面底部有更多實(shí)例。

瀏覽器支持

IE Firefox Chrome Safari Opera
         

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

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

定義和用法

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

默認(rèn)值: none
繼承性: yes
版本: CSS3
JavaScript 語(yǔ)法: object.style.textShadow="2px 2px #ff0000"

語(yǔ)法

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

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

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

親自試一試 - 實(shí)例

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

相關(guān)頁(yè)面

CSS3 教程:CSS3 文本效果

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)