全出血区块（Full-bleed Section）是什么：效果预览与 AI 设计提示词

效果预览

2.4M每月生成的文档 98%续费率 40+支持的语言

适合用在哪

数据统计带、大标语区、CTA 区；在浅色页面中制造视觉停顿。

容易踩的坑

100vw 在 Windows 等有常驻滚动条的系统上多出约 15px，产生横向滚动条。
数字间的 1px 竖线在移动端换行后仍存在，变成悬空的竖条。
一页连续放 3 条以上深色色带，节奏感变成压迫感，反而失去停顿作用。

设计提示词 · Prompt

全出血区块（Full-bleed Section）：外层 width:100vw 铺满视口（配 margin-left:calc(50% - 50vw) 逃出父容器），内层 max-width:1200px 居中。背景用深色渐变或品牌色实色，内部文字反白。典型用法是"数据统计带"：一行 3-4 组超大数字（48-72px、tabular-nums）+ 小标签，数字之间用 1px 竖线分隔。区块上下留白 96-128px，在长页面中像一条粗重的分隔线，让节奏骤然一紧。

Full-bleed Section: the outer layer uses width:100vw to fill the viewport (with margin-left:calc(50% - 50vw) to escape the parent container), and the inner layer is max-width:1200px centered. The background uses a dark gradient or solid brand color, with reversed (white) text inside. The typical use is a "stat band": a row of 3-4 groups of oversized numbers (48-72px, tabular-nums) + small labels, with numbers separated by 1px vertical lines. 96-128px of whitespace above and below the block; in a long page it acts like a thick divider, suddenly tightening the rhythm.

常见搭配

同一页面里经常和「全出血区块」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

数据里程碑带Stat Band 数字滚动计数Odometer / Count-up Animation 数字大字排版Numeric Display 免费试用 CTAFree Trial CTA

演示 HTML 结构

<div class="s s--abs d-fbs">
  <div class="d-fbs__strip">
    <b>2.4M</b><i></i><span>每月生成的文档</span>
    <b>98%</b><i></i><span>续费率</span>
    <b>40+</b><i></i><span>支持的语言</span>
  </div>
  <div class="d-fbs__body">
    <span style="height:7px;width:86%;border-radius:99px;background:var(--i-bg3)"></span>
    <span style="height:7px;width:72%;border-radius:99px;background:var(--i-bg3)"></span>
  </div>
</div>