shape-outside在iOS Safari 15.x及微信X5 WebView中不生效，因旧版内核不支持path()语法，会静默显示“ignored”；应降级为circle()或polygon()，严格控制path()字符串≤500字符、全用整数单位、内联SVG并部署HTTP服务。
shape-outside 在 iOS Safari 和微信 WebView 中直接不生效
不是你写错了，是旧版环境根本不支持关键语法。iOS Safari 直到 16.4 才开始支持 shape-outside: path()，而大量真实设备仍运行在 iOS 15.x 或微信 X5 内核（基于 Android 7–10 的旧 Chromium），它们遇到 path() 会静默忽略，DevTools 里只显示 shape-outside: ignored，连 warning 都没有。
优先降级方案：
- 用
circle(50% at 50% 50%)或polygon()替代path()—— 这两个在 Safari 12+、Chrome 37+、Firefox 62+ 全平台稳定 - 若必须保留复杂轮廓，导出 SVG 后手动提取
d值，但严格控制字符串长度：不超过 500 字符，删掉所有换行和多余空格 - 内联 SVG 必须放在
底部或中，不能嵌在 contenteditable 区域内，否则编辑器操作可能误删
本地双击打开 HTML（file:// 协议）下 shape-outside: url() 全部失效
这是协议限制，不是你 PNG 导出有问题。所有主流浏览器在 file:// 下都会静默拒绝解析 PNG 的 alpha 通道，shape-outside: url(leaf.png) 看似没报错，实则被跳过，回退为矩形。
绕过方法只有两个：
- 改用内联 SVG：
shape-outside: url(#my-polygon)+ 页面底部 - 本地起 HTTP 服务：终端执行
python3 -m http.server，并确保响应头含Access-Control-Allow-Origin: *（Nginx/Apache 配置 CORS）
别试 base64 或 data: URL —— Safari 对这类内联资源的 shape 解析支持极差，且无 fallback 提示。
Android WebView 和部分 Chrome 版本对 polygon() 坐标单位混用敏感
polygon(0 0, 100% 0, 100% 100%, 0 100%) 是矩形，不是“不规则”；真正要缺角，得往里缩，比如右下角从 100% 100% 改成 80% 80%。但更隐蔽的问题是单位混用：polygon(10px 10%, 90% 15px, ...) 在 Android WebView 中大概率路径断裂，文字直接掉到图下方。
安全写法：
- 全用
%：前提是图片有稳定宽高比，加aspect-ratio: 1/1或padding-bottom技巧锁定 - 全用整数
px：Firefox 对小数坐标（如10.5px）渲染不稳定，建议统一用10px、20px - 调试必加两行：
outline: 1px solid red看浮动盒真实范围，再叠background: rgba(0,0,0,0.05)验证描点是否贴合
富文本编辑器（contenteditable）中动态插入图片后 shape-outside 失效
用户粘贴或拖入图片时，JS 动态加样式很容易漏掉任一硬性条件。最常见的是：只加了 shape-outside，却忘了补 float: left；或者图片 width 属性值是 "100%"（字符串），浏览器无法计算浮动区域尺寸，直接忽略整个声明。
必须检查的三点：
- 图片加载完成后再设样式：监听
img.onload，避免读取offsetWidth === 0导致shape-outside被跳过 - 显式设置
display: block：防止display: inline带来的基线留白干扰对齐 - 父容器不能含
overflow: hidden、contain: layout或display: flow-root—— 它们会创建新 BFC，把浮动“关进去”，形状对外不可见
真正容易被忽略的是：shape-outside 的路径坐标必须严格落在浮动元素自身的宽高范围内。哪怕只是多写了一个像素，比如 polygon(0 0, 100% 0, 100% 101%, 0 100%)，浏览器就可能放弃整个形状计算，退回到矩形环绕——这不是 bug，是规范强制的容错机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
