Firefox默认禁用shape-margin和url()形状解析，需手动开启about:config中layout.css.shape-outside.enabled与layout.css.shape-margin.enabled两项实验标志才能启用完整支持。
Firefox 默认不支持 shape-outside 的部分关键行为，尤其是 shape-margin 和某些 url() 形状解析，不是 bug，而是被刻意禁用——必须手动开启实验性标志才能启用完整支持。
Firefox 为什么看起来“不支持” shape-outside？
它其实支持 shape-outside: polygon()、circle() 等基础函数，但以下两个能力默认关闭：
-
shape-margin属性完全无效（DevTools 中该行被划掉） - 通过
url()引用 PNG 或 SVG 时，alpha 通道形状解析常静默失败，文字退回到矩形浮动
这不是版本滞后问题：Firefox 111+ 已实现 CSS Shapes Level 1，但 WebKit/Blink 默认启用的特性，在 Gecko 中被归为「实验性布局功能」，需用户主动启用。
如何开启 Firefox 实验特性以解锁 shape-outside 完整能力
在地址栏输入 about:config，确认接受风险后，搜索并修改以下两项（双击切换为 true）：
立即学习“前端免费学习笔记（深入）”；
-
layout.css.shape-outside.enabled—— 启用基础shape-outside解析（必须开） -
layout.css.shape-margin.enabled—— 启用shape-margin（否则文字永远紧贴轮廓）
改完无需重启，刷新页面即可生效。注意：这些开关仅影响当前浏览器实例，不影响其他用户或生产环境部署。
开启后仍绕不成功？重点检查这三点
即使开了 flag，常见失效仍集中在 DOM 结构与图像处理上：
- 浮动元素后第一个文字容器必须是
<p></p>或<div>（<code>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></defs>中路径的引用有时不稳定；改用shape-outside: path("M0,0...")或外链 SVG 文件（确保同源） - 把
float当作不可删的基线（没 float 就没环绕），shape-outside只是增强 - 用
@supports (shape-outside: polygon())包裹所有增强样式，内部再加shape-margin和clip-path - 对 Firefox 用户，优先选用
polygon()而非url()，避开图像解析歧义
生产环境不能让用户开 about:config，那怎么办？
别指望用户开 flag——这是调试和验证手段，不是降级方案。真正要上线，必须：
Firefox 的实验 flag 是帮你确认「是不是代码写错了」，而不是让产品依赖它运行——这点最容易被忽略。
