前言：光是設計的靈魂

光無處不在，賦予物體形狀、材質、空間深度與時間感。網頁設計中恰當運用光影，能讓扁平介面獲得：

• 自然感：符合物理規律的陰影/高光建立真實空間序列
• 生動感：光影變化引導視線流動，創造視覺節奏
• 直觀性：凸起/凹陷、懸浮/貼合狀態一目瞭然
• 精致度：微妙的漸變、菲涅爾效應、次表面散射提升質感檔次

光影核心屬性速查

屬性	視覺效果	CSS 關鍵字
明度	亮度層級	opacity, brightness()
方向	光源位置決定陰影投射角度	box-shadow offset, transform-origin
色彩	光源色溫影響高光/陰影色相	rgba(), hsla(), filter: hue-rotate()
硬度	邊緣銳利/柔和度	box-shadow blur-radius
衰減	距離遞減規律	radial-gradient, mask-image

實戰案例賞析（10 組經典光影語言）

CSS 進階光影技法速查

/* 分層陰影系統：建立立體感 */
.shadow-system {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px rgba(0,0,0,.15);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,.06);
}

/* 彩色投影：品牌色延伸 */
.brand-shadow { box-shadow: 0 10px 30px rgba(brand-color, .3); }

/* 玻璃態 */
.glass { 
  background: rgba(255,255,255,.1); 
  backdrop-filter: blur(10px); 
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  border: 1px solid rgba(255,255,255,.18);
}

/* 菲涅爾邊緣高光 */
.fresnel { 
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.3) 50%);
  mask: linear-gradient(135deg, transparent 50%, #000 50%);
}

結語

光影不是裝飾，是空間邏輯的視覺化表達。建立專案級光影設計系統（光源方向統一、陰影分級標準、色彩溫度規範），能讓介面在縮放、適配、迭代中保持質感一致性。觀察生活中的光，是設計師最好的功課。