Full-Bleed Section
全宽通栏带
背景横向铺满屏幕两端边缘，但内部文本与元素依然遵守版心收拢的对比型节段。
Live Demo
真的可以点你刚才看到的这个：网页上下都是浅色居中内容，中间突然横切出一段深色通栏横条，横向铺满屏幕两侧边缘，里面整齐排列着几组白色的亮眼核心数据。
它到底是什么
全宽通栏带是现代网页打破单调节奏的「视觉重音」。如果整个页面从头到尾都在同一个版心里，容易产生视觉疲劳。通过插入一个全屏黑色背景的数据条、横向贯穿屏幕边缘的合作伙伴滚动墙、或整屏大图，能给页面带来强烈的空间呼吸感与节奏转换。
Anatomy · 它由什么组成
Edge-to-Edge Band铺满视口通栏外壳
w-full 突破版心边界
Contrast Background反差色彩底色
反转深浅色调形成视觉重音
Inner Container内部二次版心
max-w-7xl mx-auto 约束内容
Visual Rhythm空间节奏呼吸
为上下节段提供节奏缓冲
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 合作伙伴 Logo 墙或无限滚动走马灯（Marquee） | 用 |
| 强调型深色数据统计横条（如“已服务 100,000+ 团队”） | 用 |
| 页面底部的最终转化 CTA 呼吁大色块 | 用 |
| 纯文字密集型的文档正文（正文若全宽会造成单行文字过长无法阅读） | 不用 |
| 紧凑型移动端原生 App 列表 | 不用 |
在通栏内部忘记二次包裹 Container 版心，导致里面的文字直接贴到 4K 屏幕左右最外边缘。
使用错误的 CSS 技巧（如写死固定 vw 且未考虑滚动条宽度），引发横向出现水平滚动条。
Similar Patterns
别搞混Full-Bleed Section当前
全宽通栏带
背景横向铺满屏幕两端边缘，但内部文本与元素依然遵守版心收拢的对比型节段。
Container
版心
限制页面最大宽度并居中，防止大屏文字过长散架、小屏横向溢出。
一句话区分：背景横向铺满屏幕两端边缘，但内部文本与元素依然遵守版心收拢的对比型节段。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在白色页面中间插入一个全宽通栏深色数据段：外层背景色横向切满屏幕两端边缘（w-full bg-ink），内层用 container 居中包裹 4 组核心统计数据，上下内边距 80px。
不要只对 AI 说
Bad → Better不要这样对 AI 说
把这一段拉大填满屏幕。
改成这样说
构建通栏数据统计带 (Full-Bleed Section)：外层 section w-full bg-ink py-20 text-surface，内层用 max-w-7xl mx-auto px-6 约束 4 列核心指标，打破单调版心节奏。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。