甜點烘焙店使用過的屬性，為大家整理了前 5 名常用排行榜

❶ box-shadow
❷ liner-gradient
❸ rotate
❹ perspective
❺ radial-gradient

1 — box-shadow

是什麼
可用逗號分隔，來繪製一個或多個陰影效果，甚至可以說是無上限複製原本形狀的好用屬性。

可在任何容器裡放入 box-shadow ，例 div p strong …，如果容器形狀為正方形，box-shadow 產生的陰影則為正方形，圓形則會產生出圓形。

表達式

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color

• offset-x 水平偏移正值右移、負值左移
• offset-y 垂直偏移 正值下移、負值上移
• blur-radius模糊半徑正值越大模糊越大，不可使用負值
• spread-radius 擴散半徑正值越大陰影變大、負值則陰影縮小
• color 顏色 可用 HEX #000000及 rgba (0, 0, 0, .3)，或直接英文單字呈現
  來看範例

2 — liner-gradient

是什麼

background 的屬性之一，可以藉由兩種或兩種以上的顏色，做直線的漸層，也可加入角度 deg、 %，讓顏色搭配起來更豐富，是很常使用的效果。

表達式

linear-gradient(to (top||bottom||left||right), color)

• to top 相當於 0deg / to bottom 相當於 180deg
• to left 相當於 270deg / to right 相當於 90deg

liner-gradient寫法很多元，直接看範例比較易懂。
來看範例

3 — rotate

是什麼

可以在2D(即XY軸)中，讓物件旋轉且不會變形的屬性。

表達式

• deg旋轉角度正值為順時鐘旋轉、負值逆時鐘。

來看範例

4 — perspective

是什麼

變換 Z 軸角度，讓 3D 物件增加透視效果。可搭配 perspective-origin 來決定透視消失點的角度。

表達式

perspective: none | 0 ~ ∞

• 值越大，透視角度越淺；反之透視角度越深。

來看範例

5 — radial-gradient

是什麼

background 的屬性之一，可以藉由兩種或兩種以上的顏色做漸層，漸層可圓形可橢圓，中心點也可以依自己需求變換位置。

漸層的大小範圍可指定，例如到最近或最遠的邊(side)、最近或最遠的角落(corner)。

表達式

radial-gradient((circle||ellipse) (length) (at (percentage)) extent(closest-corner||closest-side||farthest-corner||farthest-side), red 0, blue, green 100%)

• 可指定 circle 圓形或是 ellipse 橢圓形，預設為橢圓形。
• 半徑 length可改變，例：circle 1rem、ellipse 3rem 1rem
• 中心點位置也可改變，例：at 0% 0% 中心在左上、at 100% 0% 中心在右上
• 漸層大小範圍 extent 有4個參數可指定
  ❶ closest-corner：表示從圓的中心，漸層擴散到最近的角落
  ❷ closest-side：表示從圓的中心，漸層擴散到最近的邊
  ❸ farthest-corner：表示從圓的中心，漸層擴散到最遠的角落
  ❹ farthest-side：表示從圓的中心，漸層擴散到最遠的邊
• 多種顏色寫法 (red, orange, yellow)，用半形逗號隔開

來看範例

原本以為5個屬性很快就能寫完，沒想到，深入研究後能客製的細節不少。希望這篇能為對這些屬性有疑惑的人，能提供幫助。

歡迎來參觀我的甜點烘焙店。