莎士比亚十四行诗 Sonnet 18 | 致世界戏剧日_shines

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

冷冷的草稿本 · xlsread - (Not ...· 1 月前 ·

心软的紫菜汤 · 客戶 | Amazon CloudFront· 1 月前 ·

严肃的苹果 · 王健君--中国科学院理化技术研究所· 2 月前 ·

微醺的勺子 · 如何分享产品原型文件？一个链接就行！-即时设计· 3 月前 ·

潇洒的机器猫 · 「电脑软件」动漫电影MKV格式快速无损转换M ...· 11 月前 ·

告別邊框和虛擬元素的破解技巧，歡迎使用 CSS 間距裝飾。

Microsoft Edge 團隊很高興宣布，CSS 間距修飾功能現已開放開發人員在 Chrome 和 Edge 139 中試用，這項功能可用於設定 flex、格線和多欄版面配置中項目間的間距樣式。

歡迎試用並提供意見，協助我們持續強化這個 API。

Microsoft Edge 發布公告的部落格文章

在日曆、資訊卡或資料資料格等 UI 元件中設定間距樣式，可大幅提升可讀性，並增添整體美感。不過，在格狀和 Flexbox 版面配置中實現這種效果，傳統上需要使用邊框、偽元素或背景技巧的笨拙解決方法。這些因應措施可能會因多種原因而發生問題。

不直覺： 這類元素會引入視覺樣式結構依附元件，違反語意式 HTML 的設計原則。

不利於無障礙： 這類元素通常需要額外的 DOM 元素，可能會干擾螢幕閱讀器等輔助技術。

難以維護： 這類元件需要複雜的版面配置邏輯，且不利於在元件之間維持一致的樣式。

影響效能： 這些因應措施可能會在 DOM 中新增不必要的元素，進而導致效能問題。

雖然網頁平台已支援使用 column-rule 屬性設定間距，但目前僅限於多欄版面配置。網路開發人員一直要求在其他相關版面配置類型 (例如格線和彈性容器) 中，以一致的方式設定間距樣式。

解決方案：CSS 間距裝飾

間距修飾元素 可擴充 column-rule 屬性，以便與其他版面配置類型 (例如格線和彈性容器) 搭配運作，並引入新的 row-rule 屬性來補足。這可讓不同版面配置類型中的間距樣式保持一致，並提供新的自訂選項。

CSS 間隙裝飾具有下列優點：

不會影響版面配置： 裝飾純粹是視覺效果，這些元素不會影響版面配置或間距，因此您可以放心採用，不必擔心會破壞現有設計。

重複語法： 與 CSS 格線相似，您可以使用


    repeat()

語法在容器的不同部分建立裝飾圖案，以最少的 CSS 實現豐富一致的設計。

更簡潔的標記： 不需要額外的元素或擬似元素，只需直接設定間距樣式即可。

可自訂性： 除了傳統的寬度、樣式和顏色規則樣式外，


    *rule-break

、


    *rule-outset

和


    gap-rule-paint-order

等新 CSS 屬性還提供更多自訂選項。

有了 CSS 間距修飾，您就能輕鬆建立視覺上獨特且可維護的頁面版面配置。

實際操作的間距裝飾

如要使用 CSS 間距裝飾功能，請使用支援這項功能的瀏覽器：Edge 或 Chrome 139 以上版本，並前往 edge://flags 或 chrome://flags 切換「Enable Experimental Web Platform Features」 標記。

互動式開發人員遊樂場

如要嘗試支援 CSS 間距修飾的不同版面配置類型，並使用所有新屬性，請試試我們的互動式開發人員遊樂場。

漢堡選單示範會顯示如何使用 column-rule-break: intersection 屬性，在每個可見交叉處加上行間距裝飾，以便顯示行間距。

這個示範也使用 column-rule-offset: -15px 調整裝飾的長度，將裝飾拉離每個交叉點的邊緣。

在 Notebook 示範中， row-rule-break: none 可確保資料列裝飾不會在交叉處中斷，而是會從容器的左側持續執行至右側。另一方面， column-rule-break: spanning-item 可確保系統不會在跨越項目的後方繪製欄位裝飾，而是在跨越項目的起點和終點繪製，形成可見的 T 型交叉。

row-rule 屬性會使用 repeat() 函式，精確控管如何在版面配置的不同區段中套用間距裝飾。這可啟用樣式模式，在標題和頁尾隱藏資料列規則，並在主要內容周圍使用較粗的樣式，其他地方則使用較細的樣式。

每日 CSS 新聞

Daily CSS News 示範採用雜誌風格版面配置，並在多個格線和 Flexbox 容器中定義 CSS 間距裝飾。

請注意右側的數獨遊戲，它使用 9x9 格狀區塊和重複圖案，在行與列之間繪製細線和粗線：

.sudoku { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: 6px; column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px); column-rule-style: solid; column-rule-color: var(--secondary); row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px); row-rule-style: solid; row-rule-color: var(--secondary); 要求提供意見回饋很高興您能嘗試 CSS 間距裝飾。我們認為這項功能可解決常見問題，也非常歡迎您提供意見，讓我們能根據您的需求調整這項功能。 CSS 間隙裝飾功能仍在 Chromium 中實作中。如果您決定進行測試，請注意，我們仍在積極進行相關作業，因此您可能會遇到無法正常運作的情況。目前的部分限制包括動畫間距裝飾和使用大量格線軌道。如果您發現錯誤，或對這項功能有任何想法，請開啟新的 Chromium 錯誤，分享您的意見回饋。除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。上次更新時間：2025-06-11 (世界標準時間)。 [[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-06-11 (世界標準時間)。"],[],[],null,[]]