建立 2025-02-25 更新 2026-09-11

邊框、圓角與陰影（Border & Shadow）

border 佔盒模型空間；outline 與多數 box-shadow 不佔空間。畫卡片、按鈕、輸入框時這三者常一起用。

`border` 基本寫法

.box {
  border: 2px solid #c62828;
}

順序習慣為 寬度 → 樣式 → 顏色。樣式若是 none，等於沒有邊框。

.panel {
  border-block-end: 1px solid #e0e0e0;
}

.box {
  border-width: 2px 0 2px 8px;
  border-style: solid;
  border-color: #264de4;
}

只改一邊時，用 border-top 這類縮寫比分開設 width/style/color 清楚。

.card { border-radius: 12px; }
.pill { border-radius: 999px; }
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

可寫 1～4 個值（對應四角），也可用 / 分開水平與垂直半徑做橢圓角：

.ticket { border-radius: 8px 8px 8px 32px; }

overflow

子元素（圖片、背景）要跟著圓角裁切，父層加上 overflow: hidden 或讓圖片自己設相同 border-radius。

:focus-visible {
  outline: 2px solid #264de4;
  outline-offset: 3px;
}

.card {
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.floating {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 8%),
    0 8px 24px rgb(0 0 0 / 12%);
}

語法：x 偏移 y 偏移 模糊 擴散 顏色。前面加 inset 變內陰影。

多重陰影用逗號分隔。filter: drop-shadow() 會沿著不透明輪廓（適合 PNG 圖示），box-shadow 則沿盒子矩形（含圓角）。

.hero-title {
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}

長文請少用，可讀性通常比平面色差。

下一步進入佈局：顯示與定位。