CSS3 一 文字陰影text shadow屬性

2022-03-06 09:34:20 字數 1411 閱讀 7264

文字陰影text-shadow屬性特效:

1.右下角陰影,左下角陰影,左上角陰影,右上角陰影

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>text-shadow

title

>

6<

style

>7p

16style

>

17head

>

18<

body

>

19<

p>text shadow

p>

20body

>

21html

>

文字效果為:

如果將text-shadow改成:text-shadow:-10px 10px #333 ,就將出現左下角陰影

將text-shadow改成:text-shadow:-10px -10px #333 , 就將出現左上角陰影

將text-shadow改成:text-shadow: 10px -10px #333 , 就將出現右上角陰影

2.使用text-shadow設定立體文字效果

1

doctype html

>

2 2 <

html

lang

="en"

>

3 3 <

head

>

4 4 <

meta

charset

="utf-8"

>

5 5 <

title

>text-shadow

title

>

6 6 <

style

>

77 p

1716

style

>

18 17

head

>

19 18 <

body

>

20 19 <

p>text shadow

p>

21 20

body

>

22 21

html

>

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 是指陰影的垂直偏移距離,如果其值是正值時,陰影向下偏移,反...