專題 C4：CSS 與設計
CSS 圓角與形狀視覺指南
圓角與形狀會直接影響層級、可點擊感與品牌語氣。把它們做成系統，比臨時堆樣式更可靠。
圓角要用 token，不要隨手指定
卡片、輸入框、按鈕與彈層若各自定義圓角，很快就會產生視覺漂移。最穩妥的方式是先固定半徑級距，再對應到元件角色。
一致的圓角尺度也能讓你更快發現異常元件，減少只靠主觀感受做視覺審查。
形狀表達要服務語意
- 三角形、缺口與 clip-path 更適合提示、氣泡與方向性強調，不適合無意義裝飾。
- 複雜 clip-path 只放在受控區域，並保留矩形回退樣式。
- 把主形狀、背景圖樣與角落變化納入同一套視覺語言管理。
實用輸入/輸出範例
輸入
元件：促銷卡片 需求：16px 柔和圓角 + 右上角缺口
輸出
border-radius: 16px clip-path: polygon(...) 低相容環境回退為純圓角卡片