shape-outside在小屏失效是因计算基准未随图片缩放同步更新：circle()中px值不响应，polygon()中%基于图片自身宽高，url()因压缩失真导致轮廓识别失败；必须同时满足float、明确宽高、父容器不触发bfc三个条件。
shape-outside 为什么在小屏上突然失效
文字在桌面端绕得好好的，一缩到手机屏就“啪”一下掉到图片正下方——这不是 bug，是 shape-outside 的计算基准没跟着变。circle(100px) 永远按 100px 算，不管图片缩到 40px 还是 20px；polygon(0 0, 100% 0, 100% 100%, 0 100%) 中的 100% 指的是图片自身宽高，不是视口，图片一缩，坐标全偏。用 url(mask.png) 时，小屏压缩导致 alpha 边缘糊成锯齿，浏览器识别不出有效轮廓，静默回退为矩形。
必须同时满足的三个硬性条件
缺一个，shape-outside 就等于没写：
- 元素必须设
float: left或float: right（display: inline、flex子项、伪元素均不支持） - 必须有明确宽高：
width和height，或通过aspect-ratio锁定比例（仅靠max-width: 100%不够） - 父容器不能触发 BFC 干扰浮动流：删掉
overflow: hidden、contain: layout、display: flow-root等样式再试
响应式写法：每个断点里完整重写 shape-outside
别指望只改 width 浏览器会自动推导新 shape-outside——它不会。必须在每个断点里完整重写整个声明：
img {
float: left;
width: 300px;
aspect-ratio: 4/3;
shape-outside: circle(50% at 50% 50%);
shape-margin: 12px;
}
<p>@media (max-width: 768px) {
img {
width: 200px;
shape-outside: circle(50% at 50% 50%); /<em> 必须重写，不可省略 </em>/
shape-margin: 8px;
}
}</p><p>@media (max-width: 480px) {
img {
float: none;
width: 100%;
shape-outside: none; /<em> 小屏直接关闭，比错位强 </em>/
}
.text-container {
clear: both;
}
}</p>
关键点：
- 优先用
%、vw、vmin，避免纯px；circle(50%)比circle(150px)更安全 - 对
polygon()，所有坐标统一用%，且确保图片宽高比稳定（用aspect-ratio或padding-bottom技巧） - 用
url()时，本地开发别用file://协议——跨域限制会导致加载失败
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看浮动元素真实范围，再叠一层半透背景验证描点是否贴合预期
复杂点在于：你写的每个 % 都是相对于当前 img 元素的实时尺寸，而这个尺寸本身又由媒体查询、aspect-ratio、父容器约束共同决定——稍有松动，轮廓就漂。最容易被忽略的是父容器的 overflow: hidden，它不报错，只是悄悄截掉浮动传播路径，让整个 shape-outside 彻底失能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
