shape-margin是轮廓外的固定缓冲，非偏移量；其“偏了”主因是circle()圆心默认在盒模型左上角而非内容中心，需显式设at 50% 50%并固定宽高。
shape-margin 不是“偏移量”，它只在 shape-outside 轮廓外加一层固定缓冲，定位不准往往是因为轮廓本身没对齐
shape-margin 为什么看起来“偏了”？
很多人给 circle(50%) 加 shape-margin: 15px，结果文字离图片边缘忽近忽远——这不是 shape-margin 失效，而是 shape-outside: circle(50%) 的圆心默认在元素左上角，不是图片内容中心。
圆形函数的基准点是浮动元素的盒模型原点（即 top: 0; left: 0），而图片若没设 width/height 或用了 max-width: 100%，实际渲染尺寸可能和预期不一致，导致圆心漂移。
- 必须显式设置浮动元素的
width和height（哪怕用aspect-ratio配合width: 200px） - 用
circle(50% at 50% 50%)显式声明圆心，避免依赖默认位置 - 如果图片是响应式的，优先改用
ellipse()或polygon()配合calc()计算坐标，比纯百分比更可控
Firefox 下 shape-margin 完全不生效？先确认实验标志是否开启
Firefox 默认禁用 shape-margin，DevTools 里该属性会被划掉，值设了也无效。这不是 bug，是 Gecko 引擎把该特性归为「实验性布局功能」。
必须手动开启两个 flag：
- 访问
about:config，搜索并双击启用layout.css.shape-outside.enabled - 同样启用
layout.css.shape-margin.enabled
开完立刻刷新页面即可。注意：这些开关只影响当前浏览器实例，不能用于生产环境兜底。
用 url() 引用 PNG/SVG 时 shape-margin 像“失效”？其实是形状解析失败
当 shape-outside: url(logo.png) + shape-margin: 12px 看起来没作用，大概率是 alpha 通道没被正确识别，导致浏览器回退到矩形环绕——此时 shape-margin 仍生效，但作用对象是那个看不见的矩形，不是你想要的轮廓。
- PNG 必须是 1-bit alpha（导出时关闭抗锯齿），半透明像素会让 Firefox 静默失败
- 改用
shape-image-threshold: 0.4（默认是 0.5），降低识别门槛 - 优先用内联 SVG 的
path()字符串代替url()，比如shape-outside: path("M0,0 Q50,50 100,0")，绕过图像加载与解析环节
调试时怎么快速验证 shape-outside 是否真生效？
别只盯着文字效果。最直接的办法是叠加视觉标记：
- 给浮动元素加
outline: 1px solid red，确认它真实宽高和位置 - 再加一层半透背景：
background: rgba(0,0,255,0.1)，看是否覆盖整个期望形状区域 - 在 Chrome DevTools 的 Elements 面板中，勾选「Show layout shift regions」或打开「Rendering」面板启用「CSS Shapes Highlighter」
如果 outline 是矩形但背景只填了半个圆，说明 shape-outside 没生效；如果背景贴合圆形但文字还是绕矩形，大概率是 float 没触发或父容器 BFC 未闭合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
