shape-outside 在移动端大概率失效，因旧版 iOS、微信及国产浏览器内核不支持，且需 float、无 BFC、图片前置等四前提同时满足；应分层 fallback 并保障可访问性。
移动端直接用 shape-outside 做文字环绕，大概率失效或可读性崩坏——不是写法错，是它根本不适配小屏阅读逻辑。
为什么 shape-outside 在 iOS/安卓 WebView 里常被忽略
Chrome for Android v120+、Safari 16.4+ 才稳定支持 shape-outside，但大量真实环境仍在用 iOS 15.x、微信内置浏览器（基于旧版 X5 WebView）、华为/小米系统浏览器（多数未更新 Chromium 内核）。这些环境遇到 shape-outside 会静默降级：不报错，也不生效，文字照旧按矩形绕。
更关键的是，DevTools 里可能显示 shape-outside: ignored，但你查不到具体原因——因为触发条件没满足：
-
float缺失或被父容器的overflow: hidden截断（Vue/React 默认 wrapper 常带这个） -
url(#my-shape)引用的 SVG 不是内联 HTML，而是外部文件或 base64 -
path()字符串超长（Safari 解析上限约 500 字符），或含不支持的贝塞尔指令
shape-outside 生效的硬性前提：缺一不可
就算浏览器支持，以下四点也必须同时成立，否则属性直接被忽略：
立即学习“前端免费学习笔记（深入）”；
- 元素必须设
float: left或float: right（inline-block或display: block不行） - 不能是
display: inline或display: inline-flex - 父容器不能有
overflow: hidden、overflow: auto或display: flow-root（会创建 BFC，把浮动“关起来”） - 图片 HTML 必须出现在文字内容之前，且是父容器第一个子节点（
<p><img>文字</p>可行，<p>文字<img></p>必然失败）
常见错误：用 clip-path 裁剪了图片视觉形状，却忘了 shape-outside 是另一套计算逻辑——裁剪不影响文字流，必须单独定义。
移动端真正可用的绕排方案：分层 fallback
不要强求所有设备都走 shape-outside。按兼容性分三层处理：
-
现代浏览器（Safari ≥16.4 / Chrome ≥120）：用
shape-outside: circle(50%)或polygon()（坐标全用百分比，避免 DPR 偏移） +shape-margin: 12px控制呼吸感 -
旧版 Safari / 主流 WebView：降级为
float: left+margin-right: 16px，接受矩形绕排，但加border-radius: 50%视觉模拟圆润感 -
小屏幕（
max-width: 768px）：主动关闭浮动，用媒体查询重置：float: none; display: block; margin: 0 auto;——窄屏下强行环绕会导致单字换行、词间空隙断裂，阅读体验比“不绕”还差
检查是否支持的最小成本方式：typeof CSS.supports === 'function' && CSS.supports('shape-outside', 'circle()')，返回 false 就别浪费样式了。
用 polygon() 拟合 PNG 透明轮廓时的尺寸陷阱
想让文字贴着 PNG 边缘走，不能直接导出 SVG 的 d 值就往 path() 里塞。移动端图片宽高常是 width: 100% 或 max-width: 100%，而 path() 坐标单位默认是像素，缩放后路径严重错位。
安全做法只有两个：
- 改用
polygon()手动取关键锚点，全部用百分比（如polygon(10% 10%, 90% 15%, 85% 90%, 15% 85%)），iOS 15 也支持 - 彻底放弃
path()，用shape-outside: margin-box+clip-path: inset(10% 10% 10% 10%)模拟简单圆角绕排（适合头像类场景）
最后提醒一句：哪怕所有条件都满足，shape-outside 仍只影响文字流布局，不影响 DOM 顺序。屏幕阅读器仍按源码顺序读取，所以 <img> 必须在文字前，且 alt 文本要准确描述图像语义——美观不能以牺牲可访问性为代价。
