shape-outside 仅对浮动的块级替换元素（如设置了 float 的 img）有效；最实用的是 url()（透明 PNG）、polygon() 和 path()；需确保文字在普通流中且无 clear、flex/grid 等干扰。
shape-outside 用在哪个元素上才有效
shape-outside 必须作用于**浮动元素（float 不为 none）**，且该元素需是**块级、有明确尺寸的替换元素或生成形状的容器**。最常见也最稳妥的是用在 <img alt="CSS如何让文字环绕异形图片_shape-outside属性的选择器应用" > 上——但前提是它设置了 float: left 或 float: right。
常见错误：直接给一个 div 设置 shape-outside 却没设 float，样式完全不生效；或者给 inline 元素用，浏览器直接忽略。
- 必须搭配
float: left/right（display: block会自动满足） - 图片需有明确宽高（
width/height或通过aspect-ratio固定，否则形状计算可能异常） - 不能用于
position: absolute或display: inline元素 - SVG
<image></image>或<path></path>容器也可用，但需确保其本身可浮动且有渲染盒
支持哪些 shape-outside 值，哪种最实用
真正能用于文字环绕异形图的只有三类：shape-outside: url()、shape-outside: polygon() 和 shape-outside: path()。其中：
-
url()最常用：指向一张**透明背景的 PNG（Alpha 通道定义形状）**，浏览器根据 alpha > 0 的像素区域生成外轮廓。注意：图片需同源或开启 CORS，否则降级为矩形 -
polygon()适合简单剪裁，比如三角形、五边形头像框：shape-outside: polygon(0 0, 100% 0, 100% 100%)；坐标基于元素盒模型，单位可用%、px等 -
path()灵活性最高，但兼容性稍弱（Chrome 102+、Firefox 111+、Safari 16.4+），适合复杂轮廓：shape-outside: path('M0,0 L100,0 L100,100 Z')
别用 circle() 或 ellipse() 做异形图——它们只生成规则几何形，无法表达锯齿、手绘、镂空等真实异形需求。
立即学习“前端免费学习笔记（深入）”；
文字不贴合形状边缘？检查这几个关键点
即使 shape-outside 写对了，文字仍可能“漂”在图片下方或保持矩形环绕，问题通常出在：
- 浮动元素后紧跟的文字内容必须是**普通流内块级/行内块元素**（如
p、div），不能是display: flex或display: grid容器——它们会创建新的 BFC，切断文字环绕逻辑 - 文字元素自身不能设置
clear，否则会跳过整个浮动区域 -
shape-margin被误设过大（默认为0），导致文字离形状太远；建议先设为0排查 - 图片父容器若设置了
overflow: hidden或contain: layout，可能截断形状传播，移除再试
调试技巧：临时加 outline: 1px solid red 到浮动图片上，确认形状是否按预期渲染（Chrome DevTools 的 Layout 面板里能看到 shape outline）。
兼容性与 fallback 方案怎么写
IE 完全不支持，旧版 Safari 对 url() 支持不稳定，path() 在移动端仍需谨慎。务实做法是分层降级：
- 基础层：用
float+margin模拟大致环绕（如margin-right: 20px），保证可读性 - 增强层：用
@supports (shape-outside: url(""))包裹完整异形逻辑，避免无效声明污染 - 图片
url()必须带文件扩展名（如.png），某些旧浏览器靠后缀判断 MIME 类型，缺了会失败 - 服务端可生成两套图片：一套带 Alpha 的
shape.png，一套纯白底的fallback.jpg，用<picture></picture>切换（但注意shape-outside不响应<source></source>切换）
真正的难点不在写法，而在于 Alpha 图的导出质量——毛边、半透像素、抗锯齿残留都会让浏览器生成意外的包围盒，修图比写 CSS 花时间更多。
