昨天我們把標籤 (Badge/Tag) 和卡片 (Card) 元件整合，學會了基本排列與 hover 效果。今天，我們來深入討論 CSS 元件的一些「細節設計」......

為什麼要在意這三件事？

• 邊框（border）：界定範圍、分隔區塊、提示狀態（成功/警告/錯誤）。
• 圓角（border-radius）：降低視覺尖銳感，與圖片/按鈕統一半徑更和諧。
• 陰影（box-shadow）：建立深度層級；弱陰影做分區、強陰影表互動（hover/active）。

小建議：把半徑、陰影、邊框色抽成 CSS 變數，統一調校更省時。

1. 邊框、圓角、陰影

邊框、圓角、陰影，這些小細節是提升介面質感的三大關鍵：

• 邊框 (border)：定義元件範圍、增加層次感
• 圓角 (border-radius)：柔化邊角，讓元件看起來更圓滑、美觀
• 陰影 (box-shadow)：模擬光影效果，讓元件浮出背景，增加立體感

這些效果搭配 hover、active、disabled 狀態，能讓元件更具互動性

2. 卡片(Card)的邊框與圓角

設計重點

• 細邊框 + 淡陰影，層次清楚不浮誇
• overflow: hidden 讓圖片與圓角齊一；可聚焦元素的 :focus-visible 在卡片內各自處理
• 上浮動畫 150–220ms，滑順不突兀

卡片

HTML

<div class="card">
  <img src="product.jpg" alt="商品圖片" class="card-img">
  <div class="card-content">
    <h3 class="card-title">商品名稱</h3>
    <p class="card-description">商品介紹</p>
    <button class="card-btn">立即購買</button>
  </div>
</div>

CSS

.card {
  width: 300px;                             /* 設定卡片寬度，讓不同卡片統一大小 */
  border: 1px solid #ddd;                   /* 淺灰色邊框，增加卡片邊界感 */
  border-radius: 12px;                      /* 四角圓滑，讓卡片看起來更柔和、現代 */
  overflow: hidden;                          /* 圓角生效時，內部圖片或內容不超出邊界 */
  background-color: #fff;                   /* 卡片背景白色，易於搭配其他元素 */
  transition: transform 0.2s ease-in-out,   /* 滑鼠移上去的動畫平滑 */
              box-shadow 0.2s ease-in-out;
}

/* hover 效果 */
.card:hover {
  transform: translateY(-5px);              /* 卡片微微上浮，「可互動」感 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);  /* 陰影加深，強化立體感 */
}

• overflow: hidden：如果卡片裡有圖片或標籤，圓角可能會被破壞，這樣可以「裁掉超出部分」，讓圓角完美呈現
• transition：讓 hover 效果不是瞬間跳變，而是平滑過渡
• transform---> translateY(-5px)：讓卡片微微上浮
• box-shadow：陰影增加立體感，讓卡片浮出背景，更有層次感

按鈕

設計重點:
** Hover 變深、Active 微下壓、Disabled 降低不透明
** 鍵盤使用者一定要有:focus-visible 外框

.card-btn {
  padding: 8px 16px;                         /* 文字周圍留白，讓按鈕不會太擠 */
  background-color: #007bff;                 /* 藍色*/
  color: #fff;                               /* 白字 */
  border: none;                              /* 去掉瀏覽器預設邊框，自己控制樣式 */
  border-radius: 8px;                        /* 圓角按鈕 */
  cursor: pointer;                           /* 游標變手型，提示使用者可以點 */
  transition: background-color 0.2s ease;    /* 背景色 hover 平滑過渡 */
}

.card-btn:hover {
  background-color: #0056b3;                 /* hover 時顏色變深，給互動反饋 */
}

• padding：讓按鈕大小合適、文字不緊貼邊框
• border-radius：柔化按鈕邊角，視覺上更友善
• cursor--->pointer：心理暗示使用者這是可點擊的元素
• transition+ hover：給使用者立即反饋

標籤

.tag {
  display: inline-block;      /* 讓 span 具備寬高，才能設定 padding 與 margin */
  padding: 4px 8px;           
  border-radius: 4px;         /* 小圓角 */
  font-size: 12px;            /* 字體大小 */
  color: #fff;                /* 白字*/
  margin-right: 4px;          /* 標籤間距，排列多個標籤時不擠在一起 */
}

• inline-block：span 預設是行內元素，無法設定 寬高與 padding，改成 inline-block 才可以
• padding + border-radius：文字不緊貼邊框
  * margin-right：多個標籤排列時保留間距，不會黏在一起，視覺整齊

小結：細節決定元件質感

• 邊框 (border) → 定義範圍、增加層次
• 圓角 (border-radius) → 柔化邊角、視覺友善
• 陰影 (box-shadow) → 模擬光影、浮動感
• transition → 動態效果更自然

這些小細節累積起來，整個網站就會有質感、專業感~~

心得

今天把邊框、圓角、陰影拆成可複用的規格後，整個介面顯得更「一致」了。以前我常用感覺在調數值，結果每個卡片圓角都不太一樣；現在則是變數統一半徑和陰影層級。實作時也重新意識到互動狀態的重要：hover 只是漂亮，真正讓人好用的是 focus-visible、active 與 disabled 的完整定義，尤其鍵盤導覽時的外框提示，影響體驗比想像中大。

另一個收穫是深色模式的陰影處理。過去我只把背景變深，卻忘了陰影要變得更輕、更散，不然就會是一坨。還有 overflow: hidden 雖然能修好圓角，但可能吃掉外層焦點樣式——以後我會在卡片內讓可聚焦元素自行顯示 focus，避免被截斷。

總結一下：邊框決定層次、圓角建立語氣、陰影負責深度與互動暗示。當它們被語意化與標準化後，複用與維護成本都下降了。之後想嘗試把這套規格抽成 tokens，做一個小型的元件庫，讓之後的新頁面可以直接疊上去。