shape-outside 在响应式场景下不会自动适配，需在每个断点中显式重写该属性；其计算基准为元素当前盒模型，不随缩放更新，且依赖 float、display、宽高及父容器 bfc 状态四个硬性条件。
shape-outside 在响应式场景下不是“自动适配”的，它只按当前元素盒模型计算一次形状路径；图片尺寸一变，原 polygon() 或 circle() 就全偏了——文字大概率直接掉到图下方，尤其在移动端。
为什么小屏上文字突然不绕图了？
这不是代码失效，是计算基准没更新。浏览器不会根据缩放后的图片宽高自动重算 shape-outside 值：circle(100px) 永远是 100px，哪怕图片已缩成 40px；polygon(0 0, 100% 0, 100% 100%, 0 100%) 中的 100% 是指该 img 元素自身的宽高，不是视口或父容器。
- 常见现象：iOS Safari 显示 “
shape-outside: ignored”，Chrome DevTools 里该属性被划掉，文字整段塌陷到图片正下方 - 根本原因：媒体查询只改了
width，但没重写shape-outside—— 浏览器不会推导等效形状 - URL 类型（
shape-outside: url(logo.png)）在小屏更危险：压缩+DPR 导致 alpha 边缘糊掉，轮廓识别失败，静默回退为矩形
必须同时满足的四个硬性条件
缺一个，shape-outside 就等于没写：
-
float: left或float: right——float: none、未声明、或 Flex/Grid 容器子项均无效 - 元素不能是
display: inline：<img>推荐显式加display: block，避免底部留白干扰对齐 - 必须有明确宽高：用
width+height: auto，或aspect-ratio（Safari 15.4+ 支持）；仅靠max-width: 100%不够 - 父容器不能触发 BFC：
overflow: hidden、contain: layout、display: flow-root、display: flex都会截断浮动传播，让形状“不可见”
响应式写法：每个断点必须重写整个 shape-outside
别指望只调 width 浏览器就懂你想要什么形状。必须在每个关键断点里完整覆盖声明：
img {
float: left;
width: 300px;
aspect-ratio: 4/3;
shape-outside: circle(50% at 50% 50%);
shape-margin: 1em;
}
<p>@media (max-width: 768px) {
img {
width: 200px;
shape-outside: ellipse(45% 50% at 50% 50%); /<em> 必须重写，不可省略 </em>/
shape-margin: 0.8em;
}
}</p><p>@media (max-width: 480px) {
img {
float: none;
width: 100%;
shape-outside: none; /<em> 明确关闭比删掉更稳妥 </em>/
}
.text-container { clear: both; }
}</p>
- 优先用相对单位：
circle(50% at 50% 50%)、ellipse(40% 60% at 50% 50%)、polygon()全部用%，确保坐标系随图片自身缩放同步更新 - 避免
px：Firefox 对小数敏感，10.5px可能渲染异常；如需像素级控制，改用vmin或calc() - 小屏建议直接关闭：
shape-outside: none+float: none，比错位环绕更利于可读性
调试时最容易忽略的三件事
很多问题不是写错，而是没验证真实渲染状态：
- 加
outline: 1px solid red看浮动元素真实边界，确认它是否和预期位置一致 - 叠一层半透背景：
background: rgba(0,0,0,0.05)，再对照 PNG/SVG 轮廓检查描点是否贴合 - 用
CSS.supports('shape-outside', 'circle()')检测运行时支持度，旧版 iOS Safari、微信 WebView 等会直接返回false，不该硬上
真正难的不是写出这几行 CSS，而是每次设计稿调整后，得手动量一遍各断点下图片的实际物理宽度、文字容器最小安全行宽、以及 shape-margin 在不同 font-size 下的视觉等效值——这些没法靠工具推导，只能人眼校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
