shape-margin 仅在 shape-outside 定义有效轮廓时生效，否则无效；需配合 float、确定宽高、正确几何参数及浏览器支持，调试应先验证轮廓再设间距。
shape-margin 不是独立生效的属性，它只在 shape-outside 定义的轮廓外加一层固定缓冲距离。没设对 shape-outside，shape-margin 就像给空气调边距——看着写了，实际没作用。
为什么写了 shape-margin 文字却没“退开”？
常见现象：加了 shape-margin: 20px，文字依然紧贴图片边缘，甚至某些方向离得更近。
-
shape-outside根本没生效：漏了float: left或元素不是块级替换元素（如没设width/height的<img>） - 轮廓本身偏了：比如用
circle(50%)但没写at 50% 50%，圆心默认在左上角，shape-margin是往这个错位圆心外扩的 - 浏览器未启用实验功能：Firefox 默认禁用
shape-margin，需手动开启layout.css.shape-margin.enabled和layout.css.shape-outside.enabled - 用了
url()却解析失败：PNG alpha 通道不达标（含半透明像素）、CORS 失败或本地file://协议下直接被忽略，此时回退到矩形轮廓，shape-margin作用在矩形上，视觉上“无效”
shape-margin 值怎么设才靠谱？
它接受任何长度单位（px、em、rem、%），但百分比是相对于浮动元素的**内联尺寸**（inline size），不是父容器宽度，容易误判。
- 调试阶段统一用
px：比如shape-margin: 12px，直观可控 - 避免用大数值：超过
32px容易造成文字“悬空”，尤其在小屏上段落变短时，可能只剩首行环绕，其余直接换行顶到下一块内容 - 响应式场景慎用
%：若浮动元素宽高随视口变化，shape-margin: 5%在窄屏下可能只有几像素，在宽屏下变成几十像素，破坏节奏 - 与
margin区分清楚：margin控制元素自身在流中的位置，shape-margin只影响文字环绕路径，两者可共存但职责不同
和 shape-outside 配合时的关键细节
shape-margin 的生效逻辑完全依赖 shape-outside 输出的几何轮廓。轮廓不准，间距就必然失真。
- 用
circle()或ellipse()时，必须显式声明圆心：circle(50% at 50% 50%)，且浮动元素要有确定宽高（width/height或aspect-ratio+width） - 用
polygon()时，坐标系基于元素盒模型左上角，shape-margin是向外等距膨胀整个多边形，锐角处会明显“撑开”，钝角处变化小——这不是 bug，是几何计算结果 - 用
url()时，shape-margin对 alpha >shape-image-threshold的区域生效；若 PNG 边缘有抗锯齿灰度像素，可加shape-image-threshold: 0.4提升识别率 - 不要在父容器上设
overflow: hidden或contain: layout：它们会截断形状传播，导致shape-margin计算范围被裁剪
真正难的不是写对那行 shape-margin: 16px，而是确保它作用的那个轮廓，从一开始就在你预期的位置、以你预期的方式存在。调试时先关掉 shape-margin，用 outline 和背景色确认轮廓是否真实渲染，再开——否则你永远不知道是在调间距，还是在修幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
