shape-outside 要让文字真正绕着不规则图片走，必须同时满足五个条件：配 float、设明确宽高、父容器不剪裁、图片为块级元素、形状引用正确——缺一不可，否则浏览器直接忽略该声明。
直接说结论：shape-outside 要让文字真正绕着不规则图片走，必须配 float、有明确宽高、且不能被父容器剪裁——缺一不可，否则 DevTools 里会显示 shape-outside: ignored。
为什么写了 shape-outside 却完全没反应
最常踩的坑是只加了形状，忘了加浮动。这个属性不是“让元素浮动”，而是“修饰已浮动元素的轮廓”。浏览器看到没 float: left 或 float: right，直接忽略整个声明。
-
float必须显式写在图片上，不能靠继承或 reset 覆盖后残留 - 图片默认是
display: inline，建议加display: block避免底部留白干扰对齐 - 父容器用了
overflow: hidden、contain: layout、display: flex或display: grid，都会切断浮动传播，形状“不可见” - 仅设
max-width: 100%不够，width和height（或aspect-ratio）必须可计算，否则polygon()坐标无基准
shape-outside: url() 引用 SVG 最稳，但得放对地方
比起手动写 polygon() 坐标（响应式下易错位），用内联 SVG 的 <clippath></clippath> 是编辑器和动态插入场景下的首选。
-
<svg></svg>必须放在编辑器内容区域外，比如底部，否则用户粘贴/删图时可能误删<defs></defs> -
shape-outside: url(#cat-clip)中的#cat-clip要和<clippath id="cat-clip"></clippath>完全一致，大小写敏感 -
<path d="..."></path>的坐标需按图片原始尺寸归一化：200×200 的图，就用 0–200 范围写点，别用百分比混搭 - iOS Safari 16.4+ 才支持
path()函数；旧版静默失效，建议降级为polygon()或circle()
响应式下 polygon() 坐标怎么写才不偏移
polygon() 所有坐标都基于该图片自身的宽高，不是视口或父容器。单位选错，缩放后顶点就飞了。
- 固定尺寸场景：统一用整数
px（Firefox 对小数敏感，别写10.5px） - 响应式场景：统一用
%，但注意顺序和逻辑——polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)是左下缺角，不是右下 - 别写
polygon(0 0, 100% 0, 100% 100%, 0 100%)——这还是矩形；要“缺角”，得把对应顶点往内缩，比如右下角从100% 100%改成80% 80% - 调试时加
outline: 1px solid red看浮动区域真实范围，再叠一层半透背景验证描点是否贴合
动态插入图片时 JS 容易漏的关键点
用户拖入或粘贴图片后，JS 补样式很容易漏掉硬性依赖项。
- 只设
shape-outside，没补float→ 完全无效 - 用
getComputedStyle读宽高时，图片还没加载完，offsetWidth为 0 →shape-outside被忽略，必须监听load事件后再设样式 - 服务端返回的
width="100%"这类属性值，浏览器无法算出浮动区域尺寸，得 JS 覆盖为具体像素值或加aspect-ratio - 务必同步加
clip-path，否则图片本身还显示原矩形框，仅文字绕形——视觉上仍是“方图+歪字”
真正麻烦的不是写法，而是所有条件必须同时满足：浮动声明、块级替换、尺寸固定、父容器干净、协议合规。少一个，效果就断在那儿，还不会报错，只默默回退到矩形环绕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
