溢位裁剪控制項

網頁功能： overflow: clip overflow-clip-margin

雖然 overflow: hidden 是一種「鈍器」，幾乎一律會嚴格裁剪內邊距方塊中的內容，但 overflow: clip 搭配 overflow-clip-margin 則提供「手術刀」，可精細控制區塊容器的版面配置。

使用 overflow: clip 和 overflow-clip-margin 指定裁剪位置。您可以將邊界與內部方塊模型邊緣精確對齊，也可以將裁剪邊界延伸至元素方塊之外，並指定偏移量 (安全邊界)。這種現代化做法效能極高，且不需再像以往一樣，為了讓視覺效果 (例如突出的子元素陰影) 完整呈現，而新增額外的包裝容器，並加上自訂邊框間距和負邊界。

替換元素 (<img>、<video>、<canvas> 等) 預設為 overflow: clip 和 overflow-clip-margin: content-box，可讓您完整包含使用 object-fit 或 border-radius 的圖片。

導入方式

套用 overflow: clip：確認目標元素已啟用 overflow: clip。在區塊版面配置容器上，overflow: clip 是必要設定，overflow-clip-margin 才會生效。如果 overflow 設為 hidden、auto 或 scroll，瀏覽器會忽略 overflow-clip-margin 屬性。overflow: clip 會禁止所有捲動行為 (包括使用者操作和透過 JavaScript 程式輔助)。
對齊方塊邊緣：使用關鍵字，將剪輯邊界精確對齊內部方塊模型邊緣：
- content-box：在內容區域的起始位置裁剪內容，讓邊框間距區域完全留空。內容會在邊框間距邊緣停止。非常適合巢狀版面配置模組。
- padding-box (預設)：在邊框內緣裁剪內容。
- border-box：在邊框外緣裁剪內容，讓內容位於半透明邊框下方或部分重疊。
定義指定偏移量 (出血)：提供長度值 (例如 15px 或 5px)，在裁剪像素前建立安全區域。這樣一來，突出的子項元素陰影就能在不擴大版面配置幾何圖形的情況下，完整呈現在邊界外。
合併 Box-Edge 和 Offset：同時指定方塊邊緣和長度偏移 (例如 content-box 15px)，從特定方塊邊緣偏移。

程式碼範例

以下範例示範動態容器版面配置控制項，展示自動內部內容曲線巢狀框架和子元素陰影保護，以及漸進增強備用方案。

區塊容器：巢狀圓角曲線

將 overflow-clip-margin: content-box 套用至具有圓角和自訂邊框間距的父項容器。
沿著同心內部內容方塊邊界，在內部子項媒體和頁尾元件上套用類似的圓角，解決巢狀曲線不自然的問題，不需自訂 calc() 邏輯。

<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

區塊容器：子元素陰影溢出

套用 overflow: clip 並定義延伸的 overflow-clip-margin 長度偏移，建立可見的安全區域，讓子項的陰影在父項容器外完整呈現，而不改變版面配置幾何圖形。否則子項的陰影會在父項邊界處遭到裁剪。

<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

策略執行與最佳做法

務必在使用 overflow-clip-margin 時，將 overflow: clip 套用至目標元素，因為在標準區塊版面配置容器上，必須將 overflow 嚴格設為 clip，才能啟用自訂或內部曲線裁剪邊界。
務必在有內邊距的圓角容器上設定 overflow-clip-margin: content-box，自動將非圓角的內部子元素裁剪成數學上完美的巢狀邊框曲線，不需手動減去內邊距。
務必在套用外部視覺效果 (例如 filter: drop-shadow()) 時，使用指定的長度偏移設定 overflow-clip-margin，避免定界框遭到截斷，同時不改變或擴大版面配置幾何圖形。
如果容器需要透過 JavaScript 進行程式輔助捲動操作，或是做為 position: sticky 元素的直接版面配置內容，請勿套用 overflow: clip，因為 clip 會完全停用捲動功能。

備用策略

如果目標環境不支援 overflow: clip 或 overflow-clip-margin，漸進式增強備用策略會直接取決於視覺意圖：

備用方案：以 overflow: hidden 做為基本體驗，確保核心界線不變。
如果元素不得截斷投射陰影或外部角落徽章，請改用 overflow: visible。

完成漸進增強備用導入

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}