簡單質感設計

你不需要是設計師。只要掌握這幾個 CSS 技巧，就能讓頁面從「能看」變成「好看」。

6 個質感技巧

1. 圓角（border-radius）
Before
方形按鈕
方形按鈕
After
圓角按鈕
圓角按鈕
border-radius: 12px;
2. 陰影（box-shadow）
Before
平面卡片
平面卡片
After
加了微陰影，看起來浮起來
加了微陰影，看起來浮起來
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
3. 間距（padding + gap）
Before
標題
內容一
內容二
After
標題
內容一
內容二
padding: 24px; gap: 16px;
4. 字體層級（font-size + font-weight + color）
Before
專案管理工具
讓你的團隊更有效率地協作
After
專案管理工具
讓你的團隊更有效率地協作
/* 標題 */
font-size: 24px;
font-weight: 700;

/* 副標題 */
font-size: 14px;
color: #888;
5. 色彩（主色 + 背景 + 文字）
Before
全灰色，沒有重點
After
#3b82f6
#f9fafb
#111
只用 3 個顏色
primary: #3b82f6;
background: #f9fafb;
text: #111;
6. hover 回饋
Before
After
transition: all 0.2s;

&:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

完整對比：一張卡片的變化

把上面 6 個技巧全部套用在同一張卡片上，看看差異有多大：

專案管理工具
讓你的團隊更有效率地協作和管理任務。
了解更多

質感的秘訣不是加更多東西，而是：圓角讓邊緣柔和、陰影讓層次分明、間距讓內容呼吸、層級讓視線有方向。

下一課