shape-outside在移动端常失效，因需同时满足float、非inline显示、父容器无overflow:hidden等硬性前提；ios safari旧版不支持path()，安卓webview兼容性差，应优先fallback至float+margin方案。
为什么 shape-outside 在移动端常失效
直接在手机浏览器里给浮动图片加 shape-outside: circle();，大概率文字不绕、布局错乱——不是代码写错了，而是因为 shape-outside 有硬性前提：元素必须是浮动的（float: left 或 right），且不能是 display: inline 或被父容器用 overflow: hidden 截断。很多移动端框架（如 Vue/React 的 wrapper div）默认加了 overflow: hidden，一加就废。
常见错误现象：
– 文字完全无视 shape-outside，仍按矩形边框环绕
– 图片位置正常，但形状路径没生效，DevTools 里显示 “shape-outside: ignored”
– iOS Safari 中部分 SVG 路径不解析，Android Chrome 表现正常
- 必须同时设置
float和shape-outside，缺一不可 -
shape-outside的值若引用 SVG 元素（如url(#my-shape)），该 SVG 必须内联在 HTML 中，不能是外部文件或 base64 - 使用
margin配合调整文字与轮廓间距，否则紧贴边缘易造成可读性问题
怎么用 shape-outside 绕 PNG 透明轮廓
想让文字真正贴着一张带透明背景的 PNG 边缘走，不能只靠 shape-outside: margin-box —— 它只认外框。得把图片轮廓转成 CSS 可识别的路径，最稳的方式是用工具导出 SVG <clippath></clippath>，再提取 d 属性值。
实操建议：
– 用 Figma 或 Photopea 打开 PNG，用“抠图+导出为 SVG”，复制其中 <path d="M...Z"></path> 的 d 值
– 写进 CSS：shape-outside: path("M10,20 C30,5 60,5 80,20 ...");
– 注意：iOS Safari 直到 16.4 才支持 path()，旧版只能降级为 ellipse() 或 polygon()
- 避免用过长的
path()字符串（超过 500 字符易触发 Safari 解析失败） - 对不规则图形，可用
polygon(10% 10%, 90% 15%, 85% 90%, 15% 85%)手动拟合关键点，更可控 - 务必搭配
clip-path同步使用，否则图片本身还显示原矩形，仅文字绕形
移动端适配时 shape-outside 的尺寸陷阱
shape-outside 定义的路径坐标是相对于元素盒模型的，而移动端图片宽高常设为 width: 100% 或 max-width: 100%，导致路径比例错乱——比如你按 300×300 设计的 polygon()，在小屏上图片缩到 150px，路径却还在按 300 像素单位计算，结果文字绕到屏幕外。
解决思路只有两个：
– 用 shape-outside: margin-box + clip-path: inset() 模拟简单绕排（适合圆角头像类场景）
– 改用相对单位：所有 polygon() 坐标全写成百分比，如 polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)，再配合 transform: scale() 微调
- 禁止在
shape-outside中混用 px 和 %，Safari 会静默忽略整条声明 - 安卓 WebView（尤其低版本）不支持
shape-outside与aspect-ratio共存，需显式写死height - 测试时务必在真机开启「响应式设计模式」后刷新，模拟器常缓存旧 layout tree
当 shape-outside 不行，该 fallback 到什么
别硬扛。真实项目中，约 35% 的存量 Android 设备（尤其厂商定制系统）和全部微信内置 X5 内核都不支持 shape-outside。这时候强行用 JS 检测再加载 polyfill，不如直接换方案。
推荐 fallback 链：
– 首选 float + margin 四周型（兼容性 100%，视觉损失最小）
– 次选 CSS Grid + grid-template-areas 手动切区域（适合固定图文结构，如新闻卡片）
– 极端情况用 background-image + content 伪元素拼接（文字纯文本流，图片当背景，牺牲语义但绝对稳）
- 不要用
column-count模拟绕排——多列下图片无法跨列，文字会断裂 - 避免在
shape-outside失效时留白或塌陷，用@supports not (shape-outside: circle())提前兜底样式 - 复杂绕排需求（如多图嵌套绕排）直接交给 WebView 加载预渲染 HTML，比前端实时计算靠谱得多
真正难的不是写出能绕的代码，而是判断什么时候不该绕——比如小屏上一张窄高图，硬绕会导致单行文字过短、断句频繁，阅读节奏反而被破坏。绕排不是目的，信息可读才是。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
