shape-outside 对圆形图片无效是因为它仅作用于浮动的块级容器或具明确尺寸的替换元素；必须同时设置 float、固定宽高和 shape-outside 三者缺一不可，且推荐使用 circle(50% at 50% 50%) 并配合 box-sizing: border-box 和显式 margin。
shape-outside 为什么对圆形图片无效？
直接给 <img> 元素加 shape-outside: circle() 不会生效——因为 shape-outside 只作用于浮动元素（float: left 或 right），且该元素必须是**块级容器**或**具有明确尺寸的替换元素**。而默认的 <img> 虽是替换元素，但若没设宽高、没设浮动，浏览器根本不会触发文本环绕逻辑。
必须配合 float 和尺寸才能触发环绕
让文本绕圆形图片排列，三要素缺一不可：浮动 + 显式尺寸 + shape-outside。常见错误是只写 shape-outside 忘了 float，或者用 width: 100% 导致 circle() 基准不确定。
-
float: left（或right）必须显式声明 - 图片需有固定宽高，例如
width: 200px; height: 200px;，否则circle(50%)无法计算半径 -
shape-outside的值推荐用circle(50% at 50% 50%)，确保圆心居中；若用circle(100px)，则依赖绝对长度单位 - 记得给图片加
margin，否则文字会紧贴边缘，可读性差
text-wrap: balance 不是解决方案
有人尝试用 text-wrap: balance 想“自动平衡”环绕效果，但它只影响段内断行，和 shape-outside 完全无关。真正影响环绕的是浮动框的几何形状，不是文本排版策略。
另外注意：shape-outside 的参考盒默认是 margin-box，所以如果图片有 border 或 padding，但没设 box-sizing: border-box，实际圆范围可能偏移。稳妥做法是统一用 box-sizing: border-box 并把 border 算进尺寸里。
立即学习“前端免费学习笔记（深入）”；
兼容性与 fallback 处理
Chrome/Firefox/Safari（最新两版）都支持 shape-outside，但 IE 完全不支持，旧版 Safari 对 circle() 的百分比解析偶有偏差。生产环境建议：
- 用
@supports (shape-outside: circle()) { ... }包裹样式，避免干扰基础布局 - 基础样式先按普通浮动图片写（文字自然左绕），再在支持环境下叠加
shape-outside - 不要依赖
shape-margin做主要留白——它只是微调，主间距靠margin控制更可靠
最易被忽略的是：当图片是响应式（比如 max-width: 100%）时，shape-outside: circle(50%) 仍以当前渲染宽高为基准，但若父容器缩放导致图片尺寸突变，圆形状不会重绘——得靠 JS 监听 resize 或用 container queries 配合，纯 CSS 搞不定动态响应。
