5/16作業練習

字體美化

text-shadow

Peihan
Peihan
Peihan

-webkit-text-stroke

IE11	×	其它瀏覽器	需加上-webkit-

Peihan
Peihan

-webkit-backgtound-clip: text / -webkit-text-fill-color

IE11	×	其它瀏覽器	需加上-webkit-

HELLO Peihan!

圓角、區塊陰影

border-radius（基本圓角）

只設定1個值
設定2個值
設定3個值

border-radius（正圓、橢圓）

正圓
橢圓

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

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

box-shadow

Peihan
Peihan
Peihan

border-images

Hello. My name is Peihan. You can just call me Amy. I’m from Taichung, Taiwan. Currently, I live in Yunlin City.

Hello. My name is Peihan. You can just call me Amy. I’m from Taichung, Taiwan. Currently, I live in Yunlin City.

背景圖與漸層效果

background-size

cover
contain
%

linear-gradient()

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

radial-gradient()

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

repeating-linear-gradient()

條紋背景

repeating-radial-gradient()

放射狀背景

濾鏡效果

filter

IE11	×

grayscale()
opacity()
blur()