移动端 shape-outside 图文环绕大概率失效，因不适应小屏阅读逻辑；常见原因有四：未设 float 或被覆盖、父容器限制浮动、HTML 图文顺序错误、图片无明确尺寸；响应式下 polygon 坐标易偏移，需配合 aspect-ratio；iOS 旧版及微信 WebView 不支持 path()，须降级为 circle 或 polygon；窄屏应主动断开绕排并 fallback。
移动端直接用 shape-outside 做图文环绕，大概率失效或可读性崩坏——不是写法错，是它根本不适配小屏阅读逻辑。
为什么写了 shape-outside 却完全没反应
浏览器根本没执行这个声明，而是静默忽略。最常见原因有四个，缺一不可：
-
float: left或float: right没写，或被后续样式覆盖（比如float: none） - 父容器含
overflow: hidden、display: flow-root或contain: layout，把浮动“关进盒子”里 - 图片 HTML 不在文字内容之前，比如写成
<p>文字<img></p>（必须是<p><img>文字</p>） - 元素是
display: inline（如未设宽高的<img>），或没给明确width和height（circle(50%)没基准可算）
shape-outside: polygon() 在响应式下坐标偏移严重
你按 300×300 设计的 polygon(10% 10%, 90% 15%, 85% 90%, 15% 85%)，在小屏缩到 120px 后，10% 就变成 12px，顶点全飘了——文字可能绕到屏幕外或堆叠在图下方。
- 固定尺寸场景：统一用
px，且全用整数（10px，别用10.5px，Firefox 对小数敏感） - 响应式场景：用
%，但必须配合aspect-ratio锁定宽高比（如aspect-ratio: 1/1），否则拉伸后形状扭曲 - 别写
polygon(0 0, 100% 0, 100% 100%, 0 100%)——这还是矩形；要缺角，得往内缩（如右下角改80% 80%） - 调试时加
outline: 1px solid red看浮动元素真实范围，再叠一层半透背景验证描点是否贴合
旧版 iOS / 微信 WebView 里 shape-outside: path() 直接不解析
iOS Safari 直到 16.4 才支持 path()，而大量真实设备仍跑在 iOS 15.x 或微信内置 X5 WebView 上——它们遇到 path() 会静默降级为矩形，DevTools 里只显示 shape-outside: ignored，无任何报错。
立即学习“前端免费学习笔记（深入）”；
- 优先降级：用
circle(50%)或polygon()替代复杂path() - 若必须用
path()，从 Figma / Photopea 导出 SVG，提取<path d="M10,20 C30,5...">中的d值，粘贴进 CSS，删掉换行和多余空格 -
path()字符串别超 500 字符，Safari 解析失败概率陡增，且无提示 -
url(#my-shape)必须内联 SVG，不能是外部文件或 base64；url(logo.png)在file://协议下必因 CORS 失效，必须跑 HTTP 服务
真正可用的移动端绕排：分层 fallback + 主动断开
不要强求所有设备都走 shape-outside。窄屏下强行环绕会导致单字换行、词间空隙断裂，阅读体验比“不绕”还差。
- 现代浏览器（Safari ≥16.4 / Chrome ≥120）：
shape-outside: circle(50%)+shape-margin: 12px，坐标全用百分比 - 旧版 Safari / 主流 WebView：降级为
float: left+margin-right: 16px+border-radius: 50%视觉模拟圆润感 - 小屏幕（
max-width: 768px）：媒体查询中主动重置float: none、display: block、margin: 0 auto，让图片独占一行 - 务必同步加
clip-path，否则图片本身仍显示原矩形，仅文字绕形——视觉上就是“方图+歪字”
最关键的细节往往藏在前提条件里：float 缺失、父容器 overflow 截断、HTML 顺序错位、路径单位失准——这些不是“可选优化项”，而是生效的硬门槛。漏掉任一，shape-outside 就只是 CSS 文件里一行安静的注释。
