漸層、陰影、圓角是最常用的三個 CSS 效果,也是最難用手寫調準的三個。語法其實不難,難在你「看數字想不出結果」,只好一直改、存、重整、再改。這篇說清楚每一個到底在做什麼。
漸層:linear-gradient 與 radial-gradient
漸層就是顏色之間的平滑過渡,當作 background 用。
background: linear-gradient(90deg, #3388cc, #8833cc);
background: radial-gradient(circle, #3388cc, #8833cc);- 線性(linear)沿一個角度漸變:
0deg由下往上、90deg由左往右、180deg由上往下。 - **放射(radial)**從中心向外呈圓形擴散,角度無作用。
- 可以加更多色停點(
#a, #b, #c)做多色漸層。
box-shadow:五個數字加一個顏色
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);依序是:水平位移、垂直位移、模糊、擴散、顏色。
- 位移移動陰影——正的 x/y 往右下推,看起來像光從左上來。
- 模糊讓邊緣變柔,數值越大越柔。
- 擴散在模糊前把陰影放大或縮小。
- 最前面加
inset就變成內陰影(凹陷感)。
自然不突兀的陰影,通常是「小位移 + 中等模糊 + 低透明度顏色」,而不是純黑。
border-radius:一個屬性,四個角
border-radius: 20px; /* 四角相同 */
border-radius: 20px 40px 20px 40px; /* 左上 右上 右下 左下 */一個值把四角都設成一樣;四個值從左上順時針各設一角。border-radius 等於方塊高度一半會得到膠囊形;等於正方形邊長一半會得到圓形。
用視覺化的方式做
硬猜這些數字很慢。CSS 產生器給你滑桿與色票,三種(漸層、box-shadow、圓角)都能即時預覽,調到滿意再複製乾淨的 CSS。
相關工具
- 要在 HEX、RGB、HSL 之間轉色碼?用色彩轉換。
可直接複製的配方
下面幾段涵蓋日常大多數情況,貼上去再依需要微調數字即可。
/* 卡片微浮起 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
/* 柔和的懸浮面板 */
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
/* 對角品牌漸層 */
background: linear-gradient(135deg, #6366f1, #8b5cf6);
/* 膠囊按鈕 */
border-radius: 9999px;疊兩層陰影——一層近而緊、一層遠而柔——會比單一大範圍的模糊更有立體感、也更自然。
常見錯誤
- 忘了角度單位。
linear-gradient(90, …)是無效的,要寫90deg,或用to right這類關鍵字。 - 用純黑陰影。
rgba(0,0,0,1)看起來像貼紙剪下來的。真實陰影是低透明度且帶柔邊的。 - 以為
overflow: hidden能裁掉陰影。box-shadow畫在框外,不受該元素自身的overflow影響。 - 想把圓角「調更圓」。
border-radius一旦超過較短邊的一半,就只會停在完整的膠囊或圓形,無法再更圓。
常見問題
漸層可以做動畫嗎?
色停點本身不行——CSS 無法對 background-image 做補間。改成放大 background-size 再移動 background-position,或把兩層疊起來做交叉淡入淡出。
為什麼我的陰影看不見?
幾乎都是位移和模糊都設為 0,或顏色完全透明。給它一點位移、alpha 設在 0.2 左右就會出現。
這些需要瀏覽器前綴嗎?
不用。linear-gradient、box-shadow、border-radius 在現今所有瀏覽器都不需要前綴。
配色定案後,用同一種寫法記錄每個顏色比較不會亂——可參考HEX、RGB、HSL 全解析;或直接用圖片取色器從設計稿吸出起手色。