功課W8

字體美化

1.text-shadow

人生如癡人說夢，充滿著喧嘩與躁動，卻沒有任何意義。
在命運的顛沛中，最可以看出人們的氣節。
不要給百合花鍍金，畫蛇添足。
黑夜無論怎樣悠長，白晝總會到來。
青春是一個短暫的美夢，當你醒來時，它早已消失無踪。

backgtound-clip: text /text-fill-color

不太熱烈的愛情才會維持久遠。

善良的心地，就是黃金。

時間的大鐘上，只有兩個字現在。

圓角、區塊陰影

border-radius（基本圓角）

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

border-radius（正圓、橢圓）

正圓
橢圓

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

圓角長方形
扭曲的圓形(50% 75% 30% 50% / 80% 40% 70% 30%)

box-shadow

愛所有人，信任少數人，不負任何人。
適當的悲哀可以表示感情的深切
過度的傷心卻可以證明智慧的欠缺。
決心不過是記憶的奴隸
成功的騙子，不必再以說謊為生
因為被騙的人已經成為他的擁護者

border-images

Life's but a walking shadow,a poor player that struts and frets his hour upon the stage,and then is heard no more; it is tale told by an idiot,full of sound and fury ,signifying nothing.

You say that you love the rain, but you open your umbrella when it rains. You say that you love the sun, but you find a shadow spot when it shines. You say that you love the wind, but you close the windows when it blows. This is why I'm afraid, you said that you love me too.

Therefore, since brevity is the soul of wit, And tediousness the limbs and outward flourishes. 簡扼乃機智之魂，而冗言即無用之外飾。

背景圖與漸層效果

background-size

自動
填滿
縮小(完整顯示)
百分比
像素

linear-gradient()

兩種顏色（上 → 下）
三種顏色（左 → 右）
三種顏色（左上 → 右下）

repeating-linear-gradient()

條紋背景

radial-gradient()

（Hello）
（HI）
（yo bro）

repeating-radial-gradient()

奇異~~

濾鏡效果

filter

IE11	×

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

功課練習