必须用float才能让shape-outside生效，否则文字按矩形绕排；最常见失效原因是未设float:left/right，且元素需有明确宽高、不能在flex/grid容器中、父容器不能有overflow:hidden。
必须用 float 才能让 shape-outside 生效，否则文字只会按矩形盒子绕排，和没写一样。
为什么写了 shape-outside 却没效果？
最常见原因是漏掉了 float。CSS Shapes 规范明确要求：只有浮动元素（float: left 或 float: right）才能触发文本沿自定义形状环绕。如果你只写了 shape-outside: polygon(...) 但没设 float，浏览器会直接忽略该声明。
其他典型失效场景包括：
-
img元素被包裹在display: flex或display: grid容器里——父容器的布局模式会压制浮动行为 - 图片设置了
vertical-align或align-items等对齐属性，干扰了浮动流的计算 - 目标元素没有显式设置
width和height，导致shape-outside缺少参考尺寸（尤其是circle()、ellipse()）
shape-outside 的值怎么选？
不同值对应不同适用场景，不是越复杂越好：
-
circle()：适合正圆头像或图标，需配合border-radius: 50%和固定宽高；参数如circle(50% at 50% 50%)表示以中心为圆心、半径为宽度一半 -
polygon()：用于不规则轮廓，比如手绘剪影；坐标点必须按顺时针/逆时针顺序书写，例如polygon(0 0, 100% 0, 100% 80%, 70% 100%, 0 100%) -
url()：引用带 alpha 通道的 PNG，浏览器自动按透明区域生成轮廓；注意路径必须可跨域访问，且图片不能被 CORS 阻止 -
inset()：适合“挖空”矩形区域，比如让文字从图片右侧开始环绕，左侧留白
调试时建议先用 circle() 验证流程通不通，再换更复杂的值。
怎样控制文字和形状之间的距离？
shape-margin 是唯一控制这个间距的属性，它作用于整个环绕路径外侧，不是单边距：
- 值可以是长度单位（如
10px）、百分比（相对于浮动元素的inline-size）或计算值（如calc(1em + 2px)） - 它不会影响形状本身，只向外偏移文本流的边界线
- 若同时用了
margin，两者叠加生效，容易造成意外空白，建议优先用shape-margin控制环绕间隙
另外，shape-outside 不会影响元素自身的盒模型，所以 padding、border 仍按原始矩形计算，别指望靠它们“撑开”环绕空间。
兼容性和调试要注意什么？
Chrome 和 Edge（基于 Chromium）支持最完整，Firefox 仅支持 circle()、ellipse()、inset() 和 polygon()（不含 url()），Safari 基本不支持 CSS Shapes Level 1 以外的特性。
调试时打开 Chrome DevTools → Elements 面板 → 选中图片 → 右侧 Styles 标签页下找到 shape-outside 条目，旁边有个小眼睛图标，点击即可可视化编辑形状轮廓，实时拖拽顶点调整 polygon() 坐标。
真正容易被忽略的是：一旦用了 shape-outside，后续段落的首行缩进、行高、甚至 text-align 都可能因浮动流变形而错位，尤其当图片高度超过当前行高时——这时得配合 clear 或额外包装层来收束浮动影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
