CSS Shapes 形状布局

学习shape-outside · 难度：高级 · +15XP

CSS Shapes 形状布局

CSS Shapes 让文本可以围绕非矩形形状流动，打破传统的块状布局。通过 shape-outside 属性，你可以让文字环绕圆形、多边形甚至图像的轮廓。

核心属性

属性	说明
shape-outside	定义文字环绕的形状（必须配合浮动使用）
shape-margin	文字与形状之间的间距
shape-image-threshold	使用图片作为形状时的透明度阈值

基本形状函数

/* 圆形环绕 */
.circle-shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  shape-margin: 20px;
  border-radius: 50%;
}
/* 椭圆环绕 */
.ellipse-shape {
  float: left;
  shape-outside: ellipse(50% 40% at 50% 50%);
  shape-margin: 15px;
}
/* 矩形内嵌 */
.inset-shape {
  float: right;
  shape-outside: inset(10px 20px round 20px);
}
/* 多边形环绕 */
.polygon-shape {
  float: left;
  shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
}

完整示例 — 圆形文字环绕

<div class="wrapper">
  <div class="circle-shape"></div>
  <p>这是一段足够多的文字，用来演示 CSS Shapes 如何让文字围绕圆形流动。你可以看到第一行文字与圆形边缘贴合，后续行也沿着圆形边界自然排列...</p>
</div>
<style>
.circle-shape {
  float: left;
  width: 180px;
  height: 180px;
  shape-outside: circle(50%);
  shape-margin: 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
}
</style>

使用图片作为形状

通过 PNG 图片的Alpha 通道定义形状：

.image-shape {
  float: left;
  width: 300px;
  height: 400px;
  shape-outside: url('star.png');
  shape-image-threshold: 0.5;  /* 透明度 > 0.5 的区域视为形状内部 */
  shape-margin: 15px;
}

实用场景

1. 杂志式排版：文字围绕产品图片轮廓流动
2. 首字下沉：首字母放大且文字紧密围绕
3. 创意头图：标题文字围绕装饰图形排列
4. 产品详情：描述文字围绕产品图不规则排列

重要限制

• 必须配合浮动：shape-outside 只在浮动元素上生效
• 元素必须有尺寸：浮动元素必须设置 width 和 height
• 仅影响相邻文字：只改变同一格式化上下文中的行内内容
• 不支持 shape-inside：目前浏览器不支容器内部形状

兼容性回退

.shaped-float {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;  /* 回退 — 至少视觉上是圆的 */
}
@supports (shape-outside: circle()) {
  .shaped-float {
    shape-outside: circle(50%);
    shape-margin: 15px;
  }
}

CSS Shapes 将网页排版提升到了印刷品级别。虽然兼容性不如其他 CSS 属性，但在支持它的浏览器上，能创造出令人惊艳的排版效果。