shape-outside生效需满足三个前提：必须设置float:left/right；元素须为块级替换元素且有明确宽高；父容器不能有overflow:hidden或contain:layout裁剪。
必须给元素设 float，否则 shape-outside 完全不生效——这是 90% 的“文字不绕”问题的根源。
为什么写了 shape-outside 却没反应？
浏览器只对设置了 float: left 或 float: right 的块级替换元素（如 <img>）应用 shape-outside。它不认 position: absolute、display: inline-block，也不处理行内元素（比如 <span></span>）。
- 检查 DevTools 的 Styles 面板：如果
shape-outside被划掉或显示为none，大概率是float没设，或设成了float: none -
<img>必须有明确宽高（width/height或aspect-ratio），否则polygon()、circle()等函数无法计算基准 - 父容器若含
overflow: hidden或contain: layout，会裁剪浮动区域，导致形状“不可见”
用 url() 加载透明 PNG 时为什么轮廓无效？
shape-outside: url(logo.png) 在本地双击打开的 HTML（file:// 协议）下几乎必然失效——不是语法错，而是浏览器静默忽略 alpha 通道解析。原因有两个硬限制：
- 图片需同源，或服务端响应头含
Access-Control-Allow-Origin: * - 浏览器必须能读取并解析 PNG 的 alpha 通道作为轮廓；
file://下多数浏览器直接跳过这步 - 临时验证方法：把文件部署到
python3 -m http.server或任意本地 HTTP 服务再试
更稳妥的替代方案是改用内联 SVG：shape-outside: url(#my-path)，配合 <svg></svg> 中定义的 <path id="my-path"></path>。
怎么让文字真正贴着异形边缘流动？
shape-margin 控制文字与形状轮廓之间的“呼吸区”，不是布局边距；shape-image-threshold 决定 PNG 像素是否被计入形状（默认 0.5，值越低越包容半透区域）。
-
shape-margin: 8px→ 文字沿轮廓外扩 8px 的新边界流动，不影响元素自身位置 -
shape-image-threshold: 0.3→ alpha ≥ 0.3 的像素都参与生成轮廓，适合毛边或渐变透明图 - 避免和
clip-path混用：后者只裁视觉，shape-outside仍按原始盒模型算形状，易造成“绕了个看不见的形”
哪些值真正适合不规则图形？
别用 circle() 或 ellipse() 做异形图——它们只能生成规则几何形。实用选项只有三个：
-
url()：最常用，依赖透明 PNG 或内联 SVG 的 alpha 通道，需满足 CORS 和协议要求 -
polygon()：适合手动描点的简单异形（如缺角头像），坐标单位统一用%或px，起点和顺序决定形状朝向 -
path()：灵活性最高，但 Safari 16.4+、Firefox 111+、Chrome 102+ 才完整支持，路径字符串需严格符合 SVG path 语法
复杂路径建议先用 Figma 导出或在线工具转成 <path d="..."></path>，再内联到 HTML 中引用，避免外链或 transform 干扰原始坐标系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
