CSS 快速美化指南：從零打造專業級網站視覺風格

核心設計原則

網站美化的關鍵在於「協調性」——色彩、字體、間距、交互反饋需形成統一的視覺語言。而非單純套用華麗特效。

快速上手：建立基礎設計系統

1. 定義設計令牌

:root {
  /* 色彩系統 */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;

  /* 字體系統 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 間距系統 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* 圓角與陰影 */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

2. 通用重置與基礎樣式

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.6; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

3. 核心組件樣式

按鈕系統

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-sm) var(--space-lg); font-size: 0.875rem; font-weight: 500;
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  transition: all 0.15s ease; white-space: nowrap;
}
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-hover); text-decoration: none; }
.btn-secondary { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-bg-alt); }

表單元素

.form-group { margin-bottom: var(--space-md); }
.form-label { display: block; margin-bottom: var(--space-xs); font-size: 0.875rem; font-weight: 500; }
.form-input {
  width: 100%; padding: var(--space-sm) var(--space-md); font-size: 1rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg); transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15); }

卡片組件

.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
.card-body { padding: var(--space-lg); }

進階技巧：瀏覽器開發者工具逆向學習

如最佳回答所提，善用 F12 開發者工具：

1. 打開目標網站，按 F12 開啟開發者工具
2. 使用元素選擇器（Ctrl+Shift+C）點擊想要模仿的區塊
3. 在 Styles 面板查看計算後的樣式、繼承關係、覆蓋規則
4. 複製關鍵 CSS 變數、類別結構至專案中調整

響應式斷點建議

@media (max-width: 640px) { /* 手機 */ }
@media (min-width: 641px) and (max-width: 1024px) { /* 平板 */ }
@media (min-width: 1025px) { /* 桌面 */ }

總結

建立一套屬於自己的 CSS 設計系統，比尋找「萬能美化代碼」更具長期價值。從設計令牌開始，逐步構建組件庫，配合瀏覽器調試工具學習優秀案例，才能真正掌握網站視覺設計的主動權。