Firefox 默认禁用 shape-margin 和 url() 形状解析，需手动开启 layout.css.shape-outside.enabled 和 layout.css.shape-margin.enabled 两个 about:config 标志才能实现文字绕 PNG/SVG 轮廓浮动。
Firefox 默认不启用 shape-margin 和 url() 形状解析，不是 bug，而是实验性功能被刻意关闭——必须手动开启两个 about:config 标志才能让文字真正绕着 PNG/SVG 轮廓走。
Firefox 为什么 shape-outside 看起来“不工作”
它其实支持 polygon()、circle() 这类基础函数，但以下两点默认禁用：
-
shape-margin属性完全无效（DevTools 中该行被划掉） -
shape-outside: url(logo.png)或url(icon.svg)时，alpha 通道解析常静默失败，文字退回到矩形浮动
这不是版本问题：Firefox 111+ 已实现 CSS Shapes Level 1，但 Gecko 把这些归为「实验性布局功能」，不像 Chrome 或 Safari 默认打开。
必须开启的两个 about:config 标志
在地址栏输入 about:config，确认风险提示后，搜索并双击切换为 true：
立即学习“前端免费学习笔记（深入）”；
-
layout.css.shape-outside.enabled—— 启用基础shape-outside解析（必须开） -
layout.css.shape-margin.enabled—— 启用shape-margin（否则文字永远紧贴轮廓边缘）
改完无需重启，刷新页面即生效。注意：这些开关只影响当前浏览器实例，不影响其他用户或生产环境。
开了 flag 还绕不成功？重点检查这三点
即使 flag 开了，常见失效仍集中在 DOM 结构与图像处理上：
- 浮动元素后第一个文字容器必须是
<p>或<div>（display: block），不能是display: flex或display: grid容器——它们会切断浮动流 - PNG 必须是纯黑白（1-bit alpha），导出时关闭抗锯齿；Firefox 对半透明像素容忍度极低，
shape-image-threshold: 0.4可能比默认0.5更稳妥 - 别依赖
shape-outside: url(#my-svg)指向内联 SVG 的 ID；Firefox 对<defs>中路径的引用有时不稳定；改用shape-outside: path("M0,0")或外链 SVG 文件（确保同源）
生产环境不能让用户开 about:config，那怎么办？
别指望用户开 flag——这是调试和验证手段，不是降级方案。真正要上线，必须：
- 把
float当作不可删的基线（没float就没环绕），shape-outside只是增强 - 用
@supports (shape-outside: polygon())包裹所有增强样式，内部再加shape-margin和clip-path - 对 Firefox 用户，优先选用
polygon()而非url()，避开图像解析歧义
最麻烦的不是 flag 开关本身，而是 flag 开了之后，你仍得面对 PNG alpha 精度、DOM 流中断、内联 SVG 引用不稳定这些真实渲染细节——它们不会因为 flag 打开就自动变好。
