CSS3 6 文字陰影

2022-02-26 00:53:58 字數 1145 閱讀 3464

text-shadow還沒有出現時,大家在網頁設計中陰影一般都是用photoshop做成,現在有了css3可以直接使用text-shadow屬性來指定陰影。這個屬性可以有兩個作用,產生陰影和模糊主體。這樣在不使用時能給文字增加質感

1.語法:

text-shadow : none | none | [, ] * 或none | [, ]*

也就是:

text-shadow:[顏色(color) x軸(x offset) y軸(y offset) 模糊半徑(blur)],[顏色(color) x軸(x offset) y軸(y offset) 模糊半徑(blur)]...

或者text-shadow:[x軸(x offset) y軸(y offset) 模糊半徑(blur) 顏色(color)],[x軸(x offset) y軸(y offset) 模糊半徑(blur) 顏色(color)]...

2.取值:

a):長度值,可以是負值。用來指定陰影的延伸距離。其中x offset是水平偏移值,y offset是垂直偏移值

b):陰影的模糊值,不可以是負值,用來指定模糊效果的作用距離

c):指定陰影顏色,也可以是rgba透明色。

d)圖示:

3.說明:

可以給乙個物件應用一組或多組陰影效果,方式如前面的語法顯示一樣,用逗號隔開。text-shadow: x-offset y-offset blur color中x-offset表示陰影的水平偏移距離,其值為正值時陰影向右偏移,如果其值為負值時,陰影向左偏移;y-offset是指陰影的垂直偏移距離,如果其值是正值時,陰影向下偏移反之其值是負值時陰影向頂部偏移;blur是指陰影的模糊程度,其值不能是負值,如果值越大,陰影越模糊,反之陰影越清晰,如果不需要陰影模糊可以將blur值設定為0;color是指陰影的顏色,其可以使用rgba色

程式設計師

程式設計師 側陰影效果

程式設計師 輝光效果

程式設計師 多層輝光效果

程式設計師 蘋果經典特效

程式設計師 浮雕效果

程式設計師 模糊字效果

css3 文字陰影

text shadow 基本語法 textshadow none length none shadow shadow textshadow none color color length 表示由浮點數字和單位識別符號組成的長度值,可為負值,指定陰影的水平延伸距離 color 表示顏色。陰影位於左上角...

CSS3 文字陰影

例項 基礎的文字陰影效果 h1語法 text shadow h shadow v shadow blur color 注釋 text shadow 屬性向文字新增乙個或多個陰影。該屬性是逗號分隔的陰影列表,每個陰影有兩個或三個長度值和乙個可選的顏色值進行規定。省略的長度是 0。值描述 h shado...

css3文字陰影

text shadow可以用來設定文字的陰影效果。語法 1 text shadow x offset y offset blur color x offset 表示陰影的水平偏移距離,其值為正值時陰影向右偏移,反之向左偏移 y offset 是指陰影的垂直偏移距離,如果其值是正值時,陰影向下偏移,反...