發布日期：2026 年 5 月 15 日
Chrome 和 Edge 149 以上版本支援 CSS 間距裝飾。設定格線、彈性盒和多欄版面配置之間的間距，不必使用邊框或虛擬元素。這項功能是由 Microsoft Edge 和 Google Chrome 團隊合作開發。
問題
版面配置項目之間的樣式間距一直都需要使用變通方法。個別項目、虛擬元素、背景駭客的邊框。這些做法會產生費用：
- 取決於結構。如要新增視覺分隔線，請變更標記或為特定項目編寫選取器。
- 干擾無障礙功能。不應顯示的額外 DOM 元素出現在無障礙樹狀結構中。
- 難以維護。回應式版面配置會打破您建立間距樣式時的假設。
- 這會影響成效。DOM 節點越多，版面配置工作就越多。
- 撰寫人體工學不佳。通常需要複雜的幾何計算，才能讓物件正常運作。
column-rule 屬性會處理多欄版面配置的間距裝飾，但格線和彈性方塊先前缺少同等功能。
解決方法
格線和 Flexbox 容器現在接受 column-rule。新的 row-rule 屬性會處理水平間隙。這些裝飾效果純粹是視覺效果，不會影響現有版面配置。如果您在多欄版面配置中使用 column-rule 屬性，現有行為不會改變。
舉例來說，以下是含有三個面板的彈性容器，並使用資料欄和資料列規則的樣式清單：
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
如本例所示，row-rule 和 column-rule 都接受寬度、樣式和顏色的相同簡寫。使用 rule 簡寫可一次設定兩者。
新屬性
不過，我們不只是將 column-rule 帶到其他版面配置模式，並新增 row 對應項目。我們也推出了控制項，可微調裝飾項目：
裝飾項目在交會處的換行方式、與間距邊緣的內插距離、相對於項目顯示的時間，以及如何跨間距調整樣式。規則的寬度、顏色和插邊也都可以製作動畫。
repeat() 語法
間隙裝飾支援寬度、樣式和顏色值的 repeat()。這樣一來，您就能在短格式的間隙中套用不同裝飾，與用於格線中軌定義的 repeat() 語法類似：
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
這會為前兩個資料列間距提供 1 像素規則，第三個則提供 4 像素規則，如果間距多於值，則會循環。您也可以直接傳遞多個值，不必使用 repeat()。舉例來說，在日曆中，每小時和每半小時的界線可以有不同的資料列規則樣式：
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
控制裝飾中斷
column-rule-break 和 row-rule-break 屬性可控制裝飾在間隙交集處的行為：
normal(預設)：行為取決於容器類型。詳情請參閱規格。none：裝飾會持續穿過路口。intersection：裝飾會中斷列和欄間距的交會處。
舉例來說，如果您在格線容器中將 rule-break 設為 intersection，規則會在間距交集處中斷，而不是繼續：
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
如果將 rule-break 設為 none，規則會持續在交集處執行：
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
您可以在互動式遊樂場中試用這個值。
延長或縮短裝飾
column-rule-inset 和 row-rule-inset 屬性可控制裝飾在間距內延伸的距離。您可以使用簡寫一次設定所有邊的插邊，或使用 column-rule-inset-cap (適用於沒有交叉間隙的端點) 和 column-rule-inset-junction (適用於與其他間隙相交的端點)，以非對稱方式指定插邊。
值可以是長度、百分比或 overlap-join 關鍵字，可將間隙裝飾加入角落。舉例來說，將 rule-inset 設為 5px，會將所有裝飾向內縮減 5px：
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
將 rule-inset-cap 設為 0 像素，並將 rule-inset-junction 設為 10 像素，即可在容器邊緣提供齊平的裝飾，但在交集處內縮。稍早顯示的資訊主頁示範採用這種做法，且插邊會在滑鼠懸停時產生動畫效果：
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
顯示設定
column-rule-visibility-items 和 row-rule-visibility-items 屬性會根據項目鄰接情形，控制規則的顯示時間：
normal(預設)：取決於容器類型。all：規則會顯示在每個間隙中，即使是空白間隙也一樣。around：只要有一或多個相鄰項目，就會顯示規則。between：規則只會顯示在兩個相鄰項目之間。
rule-visibility-items 簡寫可同時設定兩者。
將 rule-visibility-items 設為 between，只會顯示相鄰項目之間的規則：
section {
rule: 2px solid black;
rule-visibility-items: between;
}
另一方面，將 rule-visibility-items 設為 all 會在每個間隙中顯示規則，即使間隙沒有相鄰項目也一樣：
section {
rule: 2px solid black;
rule-visibility-items: all;
}
切換即時試用版中的值，即可查看差異！
動畫裝飾
規則的寬度、顏色和插邊都可以製作動畫。您可以在懸停或任何其他狀態變更時轉換這些項目。先前顯示的資訊主頁示範在懸停時會轉換規則顏色和插邊：
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
示範
這篇文章中顯示的所有範例，都可以在 Edge 示範網站上找到。
開發人員試用版網誌文章中包含更多示範，包括互動式遊樂場、漢堡選單、筆記本版面配置，以及包含數獨格線的雜誌風格版面配置。
自開發人員試用版推出後的變更
如果您在開發人員試用期間 (Chrome 139) 嘗試使用間隙裝飾，請注意下列變更：
- 這項功能預設為啟用，不需要任何旗標。
- 部分屬性名稱已更新，以符合最新規格 (例如
column-rule-outset和row-rule-outset已改為column-rule-inset和row-rule-inset)。 - 新增
column-rule-visibility-items和row-rule-visibility-items屬性。 - 新增動畫支援。
立即使用間隙裝飾
自 149 版起，Chrome 和 Edge 支援間隙裝飾。如果間距裝飾純粹是裝飾用途，這項功能就是漸進增強功能；在不支援的瀏覽器中，間距會正常顯示，不會顯示裝飾。對於尚未支援的瀏覽器，我們正在開發 Polyfill。
如要回報錯誤，請使用 Chromium 問題追蹤工具。如要瞭解更多背景資訊，請參閱 CSS 間隙裝飾規格。
實用連結
- CSS 間隙裝飾規格
- 開發人員試用版網誌文章 (Chrome 139)
- Edge 公告
- GitHub 說明