shape-outside 对图片文字环绕无效的主因是未设置 float 和宽高；它仅控制文字绕行路径，不处理背景颜色，需用伪元素或分层实现视觉隔离；Safari 存在渲染 bug，推荐用容器分离 shape-outside 与 background，或改用 float+padding 等轻量方案。
shape-outside 为什么对图片文字环绕没效果
常见错误是直接给 <img> 加 shape-outside 却忘了它只对浮动元素（float: left 或 float: right）生效，且必须配合 width 和 height —— 没设宽高的图片，形状区域默认是 0×0。
- 必须加
float: left（或right），否则shape-outside完全被忽略 -
shape-outside的值（比如circle()、inset()）是相对于元素盒模型的，不是相对于图片内容；若图片用object-fit: cover裁剪，形状仍按原始盒尺寸计算 - 如果图片是响应式（
width: 100%），shape-outside里的百分比会失效，得用clip-path配合float替代，或改用shape-outside: url(#svg-id)引入内联 SVG
怎么让文字不压到图片背景色上
很多人以为 shape-outside 能控制文字和背景的视觉隔离，其实它只影响文字流的“绕行路径”，不改变层叠顺序或背景渲染。真正要颜色隔离，得靠两层叠加：浮动图片 + 伪元素盖底色，或者用 background-clip 配合透明文字。
- 推荐做法：给图片容器设
position: relative，再用::before伪元素绝对定位铺一层同尺寸、带背景色的矩形，z-index 低于图片但高于文字 - 别用
background-color直接涂在<img>上——<img>是替换元素，背景会被图像本身遮挡，看不到 - 如果文字颜色和图片背景冲突（比如白字配浅图），可用
mix-blend-mode: multiply在文字上临时加一层浅色遮罩，但注意 Safari 对该属性在浮动流中的支持不稳定
shape-outside + background 组合在 Safari 里失效怎么办
Safari（尤其 iOS 15–16）对 shape-outside 和 background 同时作用于同一浮动元素的支持有 bug：背景可能被裁成矩形，或形状区域不更新。这不是 CSS 写错了，是渲染引擎限制。
- 绕过方式：把图片放进
<div>容器，shape-outside放在容器上，background放在子元素（如<span>）上，并设display: block - 避免用
shape-outside: polygon()配合渐变背景——Safari 会丢掉 polygon 的抗锯齿，边缘发虚，改用ellipse()或 SVG 路径更稳 - 检查是否启用了
will-change: transform等触发硬件加速的属性，它们有时会干扰 shape 渲染，临时去掉能验证是不是这个原因
有没有更轻量、兼容性更好的替代方案
如果只要实现“文字绕图 + 图片区域有独立背景色”，不用 shape-outside 反而更可靠。CSS 的 float 本身就能撑开文字流，再配合 padding 和 margin 模拟形状间隙，兼容到 IE9。
立即学习“前端免费学习笔记（深入）”；
- 纯浮动方案：
<img>设float: left; margin-right: 1em;，文字自然环绕；背景色用外层<div>的background+padding扩展出“视觉隔离区” - 现代备选：用
display: flow-root包住文字，防止文字塌陷进浮动区域；再用clip-path控制图片可视区域，和shape-outside效果接近但更可控 - 真正需要复杂轮廓（比如镂空文字绕不规则图）才值得上
shape-outside: url()+ 内联 SVG，其他情况属于过度设计
复杂点在于：shape-outside 的“形状”和“背景”的归属权不在同一个渲染层，你调的是文字流，不是视觉层。容易被忽略的是——它从来不管颜色，只管空间。
