shape-outside 在移动端大概率失效，主因是未设 float、父容器 overflow: hidden、元素 display 不合规、file:// 协议 cors 限制、ios safari 对 path() 支持差及 polygon 响应式坐标错乱。
移动端用 shape-outside 做文字环绕，大概率失效——不是写错了，而是它有一堆硬性前提在手机浏览器里特别容易被触发失败。
为什么写了 shape-outside 却完全没反应
最常见原因：图片没加 float: left 或 float: right。这个属性不会自动让元素浮动，只修饰已浮动元素的轮廓。漏掉 float，浏览器直接忽略声明，DevTools 里会显示 “shape-outside: ignored”。
- 父容器加了
overflow: hidden（很多 Vue/React 框架默认 wrapper 就有）会截断浮动区域，形状不可见 - 元素是
display: inline（比如未设宽高的<img>）或被contain: layout封装，shape-outside不生效 - 本地双击打开 HTML（
file://协议）时，shape-outside: url(logo.png)因 CORS 限制必然失败，必须跑在 HTTP 服务上
shape-outside: path() 在 iOS Safari 上不解析
iOS Safari 直到 16.4 才支持 path() 函数；旧版会静默回退为矩形，不报错也不警告。路径字符串超 500 字符时，Safari 解析失败概率陡增，且无提示。
- 优先降级：用
circle(50%)或polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)替代复杂path() - 若必须用
path()，先用 Figma 导出 SVG，提取<path d="M10,20 C30,5..."></path>中的d值，手动粘贴进 CSS，删掉换行和多余空格 - 务必同步加
clip-path，否则图片本身仍显示原矩形，仅文字绕形——视觉上还是“方图+歪字”
响应式下 polygon() 坐标比例错乱
polygon() 的坐标基于浮动元素自身宽高，而移动端图片常设 width: 100% 或 max-width: 100%。你按 300×300 设计的 polygon(10% 10%, 90% 15%, ...)，在小屏缩成 120px 后，10% 就变成 12px，顶点严重偏移，文字可能绕到屏幕外。
- 固定尺寸场景：统一用
px单位，Firefox 对小数敏感，全用整数（如10px而非10.5px） - 响应式场景：用
%单位，但所有点都按当前元素尺寸计算；别写polygon(0 0, 100% 0, 100% 100%, 0 100%)——这仍是矩形；要缺角，得把对应顶点往内缩（如右下角从100% 100%改成80% 80%） - 调试时加
outline: 1px solid red看浮动元素真实范围，再叠一层半透背景验证描点是否贴合预期
降级方案必须以 float 为骨架
shape-outside 失效时，不会回退到矩形环绕，而是彻底失去文字环绕能力——文字直接从图下方穿过或堆叠错位。这不是样式丢失，是布局逻辑断裂。
- 所有环绕效果必须先写
float: left（或right），哪怕只是占位；shape-outside写在同一选择器里，且放在float之后 - 用
@supports (shape-outside: circle())包裹增强样式，内部再声明shape-outside和配套clip-path；不要靠 JS 判断getComputedStyle，它返回空字符串无法区分“未支持”和“值为空” - 小屏建议切回纯
float + margin方案：用媒体查询禁用shape-outside，改用margin-right: 16px控制间距，稳定压倒一切
真正难调的不是语法，而是浮动区域高度塌陷、响应式断点下的形状重算，以及 Safari 对路径长度和单位精度的隐性限制——这些地方一踩坑，效果就“看起来像对了”，实则文字流已经错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
