CSS3 Properties

字體美化

1. text-shadow

Drop Shadow
Glow
Bevel
Emboss
Stroke
Neon

2. backgtound-clip,text-fill-color

HELLO

HELLO

HELLO

圓角、區塊陰影

3. border-radius-1(基本圓角)

設定1個值
設定2個值
設定3個值
設定4個值

border-radius-2（正圓、橢圓）

正圓
橢圓

border-radius-3（以橢圓圓弧製作圓角）

圓角長方形
扭曲的圓形
扭曲的圓形

4. box-shadow

Drop Shadow
Glow
Inset Drop Shadow
Inset Glow
Spread Shadow
Multi Shadow

5. border-images

Hi!
Hello!
Nice to meet you!
Nice to meet you ,too!
How are you?
I'm fine,thank you!And you?

背景圖與漸層效果

6. background-size

auto
cover
contain
%
px

7. linear-gradient

2Colors（top → bottom）
3Colors（left → right）
3Colors（left top → right bottom）

8. radial-gradient

（circle）
（closest-side）
（at bottom）

7. repeating-linear-gradient()

條紋背景

8. repeating-radial-gradient()

放射狀背景

濾鏡效果

9. filter

grayscale()
sepia()
contrast()
brightness()
saturate()
hue-rotate()
invert()
opacity()
blur()