shape-outside完全没效果是因为未进入浮动上下文；必须同时满足：float为left/right、display非inline、有明确宽高、父容器无overflow:hidden或contain:layout、文字在普通文档流中。
shape-outside 本身不改变盒模型，只定义文字流动的边界；写了没反应，90% 是因为元素根本没进浮动上下文，而不是形状写错了。
为什么 shape-outside 完全没效果
浏览器压根不触发 shape 计算逻辑，除非同时满足全部硬性前提：
-
float必须是left或right（none、inherit、未声明 = 无效） - 元素不能是
display: inline（<img>默认就是 inline，得加display: block） - 必须有明确宽高：用
width/height、aspect-ratio，或父容器固定尺寸约束；否则polygon()坐标无基准 - 父容器不能含
overflow: hidden、contain: layout或contain: paint——它们会裁掉浮动传播区域 - 文字内容必须在普通文档流中，不能是
display: flex或display: grid的直接子元素
shape-outside: url() 引用 PNG 为什么静默失效
本地双击打开 HTML（file:// 协议）时，Chrome/Firefox/Safari 全部忽略 PNG 的 alpha 解析，不报错也不警告——这是安全限制，不是 bug。
真正能跑通的路径只有两条：
- 部署到 HTTP 服务（如
python3 -m http.server），并确保响应头含Access-Control-Allow-Origin: * - 改用内联 SVG：
<svg><defs><path id="my-shape" d="M..."></path></defs></svg>，再写shape-outside: url(#my-shape)（SVG 必须在同个 HTML 文件里）
别信“PNG 转 base64 就能用”——base64 仍是跨域资源，同样被静默丢弃。
polygon() 坐标单位怎么选才不偏移
所有坐标都基于该浮动元素自身的宽高，不是父容器。混用单位或顺序错，形状就完全跑偏：
- 统一用
%：适合响应式，但所有点都按当前元素尺寸百分比解析，比如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 和 margin 到底差在哪
shape-margin 不是 margin 的别名，它只控制文字内容到 shape-outside 轮廓的最小距离，不影响元素自身布局位置：
-
shape-margin: 12px表示文字沿形状外扩 12px 的缓冲带流动，不是把元素整体推远 - 若同时设了
margin-right: 30px和shape-margin: 20px，文字离形状轮廓是 20px，但离浮动元素右边框是 50px -
shape-margin不支持%，值用px、em、rem均可；动态排版建议用em，避免字体缩放后文字贴太近 -
padding和border对shape-outside无影响——它们不参与形状计算；想模拟“内填充感”，得靠inset()或 SVG 路径偏移
shape-outside 失效时，文字直接从图下方穿过，而不是悄悄降级为矩形环绕。你得盯着 DevTools 的 Styles 面板，看声明是否被划掉或显示为 none，才能确认是加载失败、CORS 拒绝，还是前提条件漏了一条。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
