AI 摘要：本文介绍了 CSS 中一个令人兴奋的新特性——CSS gap decorations（间隙装饰），它允许开发者在 flexbox、grid 和多列布局等布局类型的间隙中绘制装饰性分隔线，解决了过去需要使用复杂 workaround 的问题。文章回顾了 CSS gap 属性的历史，并详细阐述了新特性如何通过 column-rule、row-rule 等属性实现灵活的样式化分隔线设计，同时提供了浏览器支持情况和具体使用示例，帮助开发者理解和应用这一功能。

1. 引言与背景
• 回顾了作者四年前关于 CSS gap 属性的文章，介绍了当时使用 gap 轻松实现布局间距的便利性，但也指出了样式化间隙区域的困难，需要使用额外的 HTML 元素或伪元素等 workaround。
• 这些 workaround 存在布局影响、辅助技术干扰和代码污染等问题。
• 提出新特性 CSS gap decorations 将彻底改变这一现状，提供简单且灵活的解决方案。

2. CSS Gap Decorations 特性介绍
• 基础概念：扩展了多列布局中已有的 column-rule 属性，使其适用于 flexbox 和 grid 布局，用于绘制列间分隔线。
• 新属性 row-rule ：用于在行间绘制分隔线，支持多种样式（如虚线、实线）和颜色配置。
• 高级功能：支持通过 repeat() 函数定义多种样式的分隔线，适应未知数量的间隙；引入 row-rule-break 、 column-rule-break 、 row-rule-outset 、 column-rule-outset 和 gap-rule-paint-order 等属性，允许精细调整分隔线的绘制方式、交叉点行为和起止位置。

3. 适用范围：目前支持 grid、flexbox 和多列布局，未来将扩展至 masonry 布局。

4. 浏览器支持情况
• 当前仅在基于 Chromium 的浏览器（如 Chrome 和 Edge 139 版本）中可用，且需通过启用实验性 Web 平台功能标志（flag）来体验。
• 提供了启用 flag 的具体步骤，并鼓励开发者试用并提供反馈以改进特性。

5. CSS Gap Decorations 使用示例
• 通过一个简单的网页布局示例（包含 header、nav、main 和 footer），展示了如何使用 grid 和 flexbox 布局结合 gap 属性和 row-rule 、 column-rule 属性绘制分隔线。
• 逐步调整样式，例如使用不同粗细和样式的分隔线，以及通过 column-rule-outset 属性控制垂直分隔线的起止位置，优化布局视觉效果。
• 提供了最终示例的实时演示和源代码链接。

6. 更多学习资源
• 介绍了额外的属性功能，如 gap-rule-paint-order 控制行与列分隔线的层级， row-rule-break 和 column-rule-break 定义交叉点行为。
• 由于特性较新，MDN 暂无相关文档，推荐参考 CSS Gap Decorations Module Level 1 草案和 Microsoft Edge 的说明文档。
• 提供了 Edge 团队的交互式 playground 工具，供开发者直观配置间隙装饰，并鼓励通过 Chromium issue tracker 提交反馈和问题。

CSS-Tricks

The Gap Strikes Back: Now Stylable | CSS-Tricks

Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your…