主页/WEB笔记/长文排版总像白开水，如何用 CSS shape-outside 给页面加点个性？

长文排版总像白开水，如何用 CSS shape-outside 给页面加点个性？

2,997字
13–19 分钟
in

长篇文章读起来容易犯困，很大原因出在视觉排版上。文字规规矩矩码在方块图片旁边，读着读着就没了耐心。其实，CSS 里藏着个叫 shape-outside 的属性，专门用来打破这种沉闷。它能让文字顺着图片里人物的轮廓、乐器的曲线去流动，就像给文章注入了节奏感，让阅读体验瞬间鲜活起来。下面就把这几年在项目里折腾出的经验，掰开揉碎了分享出来。

目录

打破矩形边框，让文字绕着图像轮廓走

基础图文绕排

想实现文字绕着不规则图形走，得先摸清 shape-outside 的门道。这个属性必须搭配 float 使用，图片浮起来之后，文字就不会再死板地贴着矩形框，而是会去贴合图片里透明区域的边缘。举个实际操作的例子，假设有一张歌手抱着吉他的 PNG 图片，背景是透明的：

.guitar-img {
  float: left;
  width: 280px;
  shape-outside: url('singer.png');
  shape-image-threshold: 0.8;
  shape-margin: 15px;
}

这段代码里，shape-outside 直接引用了图片，浏览器会分析图片的透明通道，把透明部分的边缘当作文字绕排的边界。shape-image-threshold 设置的是透明度阈值，数值从0到1，0.8意味着像素透明度超过80%的区域就会被视为轮廓的一部分。shape-margin 则是在这个轮廓外再加一圈空白，防止文字贴得太紧显得拥挤。

这里有个小坑，如果图片的透明边缘太生硬，文字绕过去会显得很突兀。解决方法是在图片编辑软件里给主体人物边缘稍微加点羽化，大概1-2像素的柔边，这样生成的绕排路径会更自然。

仿居中图像

有时候想把图片放在文字中间，两边都绕着文字走，但 float 只有左和右，没有居中。这种场景可以通过“镜像分割法”来整活。

准备一张人物图片，在修图软件里沿着人物中线垂直切开，保存成左右两张独立的 PNG，注意每张的边缘都要保留人物轮廓的部分透明区域。HTML 结构这样写：

<div class="bio-grid">
  <div class="left-col">
    <img src="singer-left.png" alt="左侧轮廓">
    <p>从乡村酒吧唱到万人体育场，这姑娘的嗓子天生带着故事。她的歌词里没有矫情，只有公路、威士忌和凌晨三点的星空。</p>
  </div>
  <div class="right-col">
    <img src="singer-right.png" alt="右侧轮廓">
    <p>新专辑的制作人是个怪才，把班卓琴和电子合成器揉在一起，有人说这是离经叛道，她说这是打破边界。听着听着，还真让人上头。</p>
  </div>
</div>

然后用 CSS 把左右两半“拼”回去：

.bio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.left-col img {
  float: right;
  width: 90%;
  shape-outside: url('singer-left.png');
  shape-margin: 1rem;
}

.right-col img {
  float: left;
  width: 90%;
  shape-outside: url('singer-right.png');
  shape-margin: 1rem;
}

左边栏的图片向右浮动，右边栏的图片向左浮动，两个半身像在中间接壤，文字就围绕着每个人物轮廓流淌，视觉上就像一张图被文字温柔包裹。做这个操作时得留意图片宽度的百分比设置，两个 width 加起来别超过100%，不然会打架。另外，确保左右两张图片的透明背景区域在接缝处能对齐，否则中间会露出一条尴尬的缝隙。

玩出花样的绕排进阶操作

非破坏性剪裁路径

直接给图片加透明通道属于“破坏性”操作，会丢失背景细节。更好的做法是用 clip-path 画个形状，再把这个形状交给 shape-outside 用。

比如想让人物从背景里“凸”出来，文字绕着外围走，可以先用 Bennett Feely 的在线工具画出多边形路径。打开工具后，上传原始图片，鼠标点一圈想要的轮廓，工具会自动生成 clip-path: polygon(坐标点列表) 的数值。

拿到数值后，直接复用到样式里：

.feature-img {
  float: left;
  width: 100%;
  shape-outside: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  shape-margin: 20px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

这里 shape-outside 和 clip-path 用了相同的多边形，clip-path 负责裁剪图片显示区域，shape-outside 负责告诉文字该绕着哪条边跑。这样一来，原图的草地、灯光这些背景细节都保留着，但文字却老老实实绕着人物轮廓走，不会压到人物脸上。

手工调多边形路径时，坐标值是百分比，需要反复预览微调。有个省事的小技巧，先把 shape-outside 用上，给图片加个半透明红色背景，就能清楚看到文字绕排的实际边界线，方便调整坐标点。

文字穿梭于图像之间

想让排版更有动态感，可以放两张不规则蒙太奇图片，让文字从它们中间穿过去，像溪流绕过石头那样。

准备两张图片，一张是破碎的吉他拨片形状，一张是飘散的乐谱碎片，两张都做成带复杂透明通道的 PNG。HTML 里把两张图放在文字内容的上方：

<div class="montage">
  <img src="pick-shape.png" class="float-left" alt="拨片轮廓">
  <img src="notes-shape.png" class="float-right" alt="音符轮廓">
  <p>她的音乐里总有些不安分的因子。上一秒还是温柔的情歌，下一秒就可能变成狂暴的电子乡村。这种分裂感让人着迷，就像在公路上开着敞篷车，突然冲进一片霓虹闪烁的未来都市。</p>
  <p>新单曲的制作过程也很离谱，据说录吉他的时候，乐手喝了半瓶威士忌，弹出来的音符都带着醉意。但就是这种失控感，让整首歌有了灵魂。听完想跟着晃，管它是不是跑调。</p>
</div>

CSS 里分别让两张图左右浮动，并用各自的图片 URL 作为绕排形状：

.float-left {
  float: left;
  width: 40%;
  shape-outside: url('pick-shape.png');
  shape-margin: 2%;
}

.float-right {
  float: right;
  width: 35%;
  shape-outside: url('notes-shape.png');
  shape-margin: 2%;
}

文字会自动在两张图片的轮廓之间寻找通道，如果两张图的间距合适，就能形成一种“文字穿针引线”的视觉效果。调整 shape-margin 可以控制通道宽窄，数值越大，文字挤过去的空间越窄，压迫感越强，反之则越舒展。

搞这种复杂排布时，建议先在浏览器开发者工具里给两个 img 加上临时背景色，方便观察它们占位和重叠情况。一旦发现文字显示不全或者被图片遮挡，优先检查浮动顺序和 width 百分比，确保两个图片宽度加上间隙不超过容器总宽。

最新发布