CSS shape-outside：文本环绕与图文排版

---

title: CSS shape-outside：文本环绕与图文排版

keywords:

• shape-outside
• shape-margin
• 浮动排版
• 圆形/路径
• 图文环绕

description: 说明 shape-outside 与 shape-margin 的用法，让文本沿自定义形状环绕排版，支持圆形/椭圆/路径等，提升图文版式表达并给出兼容与性能建议。

categories:

• 文章资讯
• 编程技术

---

概述

shape-outside 与浮动布局配合，让文本沿指定形状边界流动，支持基本形状与 path()。适用于杂志式图文排版与品牌视觉场景。

示例

.float { float: left; shape-outside: circle(80px at 100px 100px); shape-margin: 12px; width: 200px; height: 200px }

工程建议

• 版式与可读性：控制 shape-margin 保持文本可读；避免过度曲折导致阅读困难。
• 性能与兼容：复杂路径可能影响排版性能；在不支持浏览器回退到矩形浮动。
• 与现代布局：在 Grid/Flex 环境中谨慎使用；测试跨平台表现。

参考与验证

• MDN shape-outside 文档：https://developer.mozilla.org/docs/Web/CSS/shape-outside
• CSS Shapes 规范：https://www.w3.org/TR/css-shapes-1/