必须同时设置float和shape-outside，缺一不可；否则文字不环绕、形状不生效，DevTools中该声明被划掉。最常见原因是未设float:left/right，而shape-outside仅扩展浮动元素的环绕区域，无浮动则无上下文；其他干扰包括父容器用flex/grid、overflow:hidden触发BFC、img未设display:block或出现在文字之后。
必须同时设置 float 和 shape-outside，缺一不可；否则文字不会绕、形状不生效、DevTools 里直接划掉该声明。
为什么加了 shape-outside 文字还是不绕？
最常见原因是漏了 float: left 或 float: right。shape-outside 不是独立排版属性，它只扩展浮动元素的“文字环绕区域”，没浮动就等于没上下文。
其他高频干扰点：
-
img父容器用了display: flex或display: grid—— 子项脱离文档流，浮动失效 - 父容器设置了
overflow: hidden、contain: layout或display: flow-root—— 触发新 BFC，把文字流隔在外面 -
img是inline元素（默认行为），没设display: block，基线对齐干扰浮动定位 - HTML 中
<img>出现在文字之后，如<p>文字<img src="..."></p>—— 浮动区域无法影响前面的内容
shape-outside 值怎么选才靠谱？
日常能用、兼容性好、调试直观的组合就那么几个：
立即学习“前端免费学习笔记（深入）”；
-
shape-outside: circle(50% at 50% 50%)：配合border-radius: 50%，视觉和路径一致；百分比基于自身宽高，响应式友好 -
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%)：看着和默认矩形一样，但加shape-margin: 12px后，文字整体外扩一圈，比纯靠margin更可控 -
shape-outside: url("mask.png")：必须是同源或开启 CORS 的透明 PNG；本地开发用file://协议会静默失败 - 避免用
path()做首屏图文 —— Safari 16.4+ 才稳定支持，且长字符串（>500 字符）易解析失败
移动端为啥一加就崩？
不是代码错，是环境不认账：
- iOS Safari 15.x 及更早、多数安卓 WebView（如微信内置浏览器）完全忽略
shape-outside，降级为矩形环绕甚至不绕 - 浮动本身在窄屏下导致文字行宽过窄，单字换行、断词生硬，可读性比效果更重要
-
url()或polygon()里的像素值（如polygon(0 0, 300px 0)）在不同 DPR 屏幕上偏移，必须全换成%或vw - 小屏图片缩到
120px，但circle(100px)还按原始尺寸算，文字直接糊进图里
安全做法是在 @media (max-width: 768px) 里写死：float: none; display: block; margin: 0 auto; shape-outside: none;，并显式清除残留 margin 和基线间隙。
响应式下怎么让形状跟着图片缩放？
shape-outside 本身不响应式，必须手动重置。关键不是“让它自适应”，而是“在每个断点里重新声明”：
- 图片用
aspect-ratio: 4/3或padding-bottom技巧稳住宽高比，避免缩放时形状计算失准 - 所有
polygon()坐标改用百分比（如polygon(10% 10%, 90% 15%, 85% 90%)），禁用px - 媒体查询里不仅要改
width，还必须重写整条shape-outside声明 —— 浏览器不会推导等效形状 - 小屏直接关掉：
shape-outside: none比留一个错位的轮廓更可靠
真正难调的不是语法，是浮动区域高度塌陷 + 小屏下形状重算时机；Chrome DevTools 的 “Layout” 面板勾选 “Show shape outlines” 能省掉 80% 的盲猜时间。
