shape-outside本身不修改盒模型，仅定义文字环绕边界；最常见失效原因是元素未进入浮动上下文——必须设float:left/right、display:block、明确宽高，且父容器不能有overflow:hidden或contain:layout。
shape-outside 本身不修改盒子模型，它只定义文字环绕的边界；所谓“不规则盒子模型文本环绕”，本质是让文字绕着一个非矩形轮廓流动，而元素自身仍按标准盒模型渲染。
为什么写了 shape-outside 却没反应
最常见原因不是语法错，而是该元素根本没进入浮动上下文。shape-outside 只对 float: left 或 float: right 的元素生效，且必须满足：
- 元素不能是
display: inline（如<span></span>），推荐用<img>或<div> 并显式设 <code>display: block - 必须有明确宽高：
width和height（或通过aspect-ratio固定），否则polygon()、circle()等函数无法计算基准 - 父容器不能有
overflow: hidden或contain: layout，否则可能裁剪浮动区域，使形状“不可见” - 文字内容必须在普通文档流中，不能是
display: flex或display: grid容器的子元素 - 统一用
%：适合响应式，但所有点都按当前元素尺寸百分比解析，比如polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)是左下缺角，不是右下 - 统一用
px：适合固定尺寸场景，Firefox 对小数精度敏感，建议全用整数（如10px而非10.5px） - 别写
polygon(0 0, 100% 0, 100% 100%, 0 100%)——这仍是矩形；要实现“缺角”，得把对应顶点往内缩，比如把右下角从100% 100%改成80% 80% - 调试时加
outline: 1px solid red看浮动元素真实范围，再叠一层半透背景验证描点是否贴合预期 -
shape-margin: 12px表示文字沿形状外扩 12px 的缓冲带流动，不是把元素整体推远 - 若同时设了
margin-right: 30px和shape-margin: 20px，文字离形状轮廓是 20px，但离浮动元素右边框是 50px -
shape-margin不支持%，值用px、em、rem均可；动态排版建议用em，避免字体缩放后文字贴太近 - padding 和 border 对
shape-outside无影响——它们不参与形状计算；想模拟“内填充感”，得靠inset()或 SVG 路径偏移 - 图片必须同源，或服务端响应头含
Access-Control-Allow-Origin: *；本地file://协议下几乎必然静默忽略 - 浏览器必须能读取并识别 PNG 的 alpha 通道——很多工具导出的 PNG 实际是“伪透明”，Alpha 值全为 0 或 255，中间过渡灰度缺失，导致轮廓锯齿或崩坏
- 更稳方案是改用内联 SVG：
<svg><path id="my-path" d="M..."></path></svg>，再写shape-outside: url(#my-path)；SVG 必须内联，外链无效 - 检查 DevTools Elements 面板：选中该
<img>，看 Styles 里shape-outside是否被划掉（invalid）或显示为none
用 polygon() 描点时坐标单位怎么选
polygon() 坐标基于浮动元素自身的宽高，不是父容器。单位混用或起点顺序错会导致形状完全不对：
shape-outside 和 shape-margin、margin 的关系
shape-margin 不是 margin，它只控制文字内容到 shape-outside 轮廓的最小距离，不影响元素自身布局位置：
用 url() 引用 PNG 时为什么常失效
shape-outside: url(logo.png) 看似简单，实际浏览器需同时满足两个硬条件才能解析 alpha 通道为轮廓：
真正难的不是写出 shape-outside，而是让它的轮廓和视觉呈现一致——比如用了 clip-path 隐藏部分图像，但 shape-outside 还按原始盒模型算，文字就绕了个“看不见的形”。这种错位，只有在 Safari 16.0 以下或 Firefox 旧版本里才更难调试。
