shape-outside在响应式下不会自动适配，必须在每个断点中显式重写整个声明；其计算基准为元素当前盒模型且不随缩放更新，需同时满足float、display:block、明确宽高及父容器不触发BFC四个硬性条件，否则文字直接掉至图下。
shape-outside 在响应式场景下不会自动适配，必须在每个断点中显式重写整个声明，否则文字大概率直接掉到图片正下方。
为什么小屏上文字突然不绕图了
这不是代码失效，是计算基准没更新。浏览器按当前元素盒模型算一次 shape-outside，之后缩放图片，circle(100px) 还是 100px，polygon(0 0, 100% 0, 100% 100%, 0 100%) 中的 100% 仍指原图宽高，不是视口或父容器尺寸。iOS Safari 可能直接显示 shape-outside: ignored，Chrome DevTools 里该属性被划掉——都是因为媒体查询只改了 width，没重写形状本身。
必须同时满足的四个硬性条件
缺一个，shape-outside 就等于没写：
- float: left 或 float: right（float: none、Flex/Grid 子项、未声明均无效）
立即学习“前端免费学习笔记（深入）”；
- 元素不能是 display: inline；<img> 推荐加 display: block 避免底部留白干扰
- 必须有明确宽高：width + height，或用 aspect-ratio（Safari 15.4+ 支持）；仅靠 max-width: 100% 不够
- 父容器不能触发 BFC：overflow: hidden、contain: layout、display: flow-root、display: flex 都会截断浮动传播
polygon() 坐标单位与响应式写法
polygon() 所有点都基于该浮动元素自身宽高，不是父容器。混用单位或顺序错，形状就跑偏：
- 统一用 %：适合响应式，但需确保宽高比稳定（用 aspect-ratio 或 padding-bottom 技巧）
- 别写 polygon(0 0, 100% 0, 100% 100%, 0 100%)——这仍是矩形；要“缺角”，得把对应顶点往内缩，比如右下角从 100% 100% 改成 80% 80%
- 每个断点里必须重写整条声明，不能只改 width：
img {
float: left;
width: 300px;
aspect-ratio: 4/3;
shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}
@media (max-width: 768px) {
img {
width: 200px;
shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}
}
@media (max-width: 480px) {
img {
float: none;
width: 100%;
shape-outside: none;
}
}url() 引用 SVG 时最易忽略的细节
shape-outside: url(#my-path) 比 PNG 更可靠，但仍有坑：
- <svg> 必须放在编辑器或内容区域之外（如 <body> 底部），避免被误删
- <path d="..."> 坐标需按图片原始宽高归一化（例如 200×200 图片，就用 0–200 范围）
- shape-image-threshold: 0.4 可调低阈值，让半透边缘参与轮廓生成（默认 0.5）
- 务必同步用 clip-path 裁剪图片本身，否则图片还显示矩形框，仅文字绕形
复杂点不在写法，而在调试时容易漏掉 outline: 1px solid red 看浮动范围，也容易忽略 getComputedStyle 读取尺寸前图片尚未加载完成的问题。
