shape-outside生效必须同时满足float:left/right，否则被忽略；需确保元素块化、父容器不剪裁浮动、图片有明确宽高、URL路径合法且同步clip-path，polygon坐标单位需统一。
直接说结论：shape-outside 要生效，必须配 float: left 或 float: right，缺一不可；否则浏览器直接忽略声明，DevTools 里会显示 “shape-outside: ignored”。这不是写法错，是布局前提没满足。
为什么写了 shape-outside 却完全没反应
最常见原因就是只加了形状、没设浮动。这个属性本身不触发浮动，只修饰已浮动元素的轮廓。
-
float必须显式声明——float: none、未设置、或被后续 CSS 覆盖（比如框架重置），都等于没写 -
默认是
display: inline，需确保它已块化：靠float自动块化即可，不必额外加display: block，但若包裹在<figure>或<div>里，得确认浮动作用在<img>本体上 - 父容器用了
overflow: hidden、contain: layout、display: flex或display: grid，会剪裁浮动传播区域，形状“不可见” - 图片没设明确宽高：
width和height缺一不可；仅靠max-width: 100%或aspect-ratio（Safari 15.4+ 才支持）不够稳定
shape-outside: url() 引用 PNG/SVG 为什么总回退成矩形
本地双击打开 HTML（file:// 协议）下，所有主流浏览器都会静默忽略 PNG 的 alpha 通道解析，shape-outside 直接降级为矩形——不是你导出问题，是协议限制。
- 必须跑在 HTTP 服务上，比如终端执行
python3 -m http.server；服务端响应头需含Access-Control-Allow-Origin: *，否则跨域图片也会失效 - 优先改用内联 SVG：
shape-outside: url(#cat-clip)+ 页面底部<svg><defs><clipPath id="cat-clip"><path d="M20,50 C30,20..."></clipPath></defs></svg>，完全避开 CORS 和 alpha 解析问题 - 路径字符串别超 500 字符，iOS Safari 解析失败不报错，只静默回退；从 Figma 导出后，手动提取
d值，删掉换行和多余空格 - 务必同步加
clip-path裁剪图片本身，否则图片还显示原矩形框，仅文字绕形——视觉割裂感极强
polygon() 描点总对不上，坐标单位怎么选
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看浮动元素真实范围，再叠一层background: rgba(0,0,0,0.1)验证描点是否贴合预期
真正难的不是写对语法，而是让浮动上下文稳定存在——编辑器里 DOM 频繁重排、移动端视口缩放、服务端返回的宽高值是百分比而非像素，这些才是实际落地时最常卡住的地方。
