shape-outside 要生效必须同时满足：显式设置 float: left/right；元素为块级（如 display: block）；宽高固定；父容器不创建新 bfc（避免 overflow: hidden 等）；png/svg 需符合协议与格式要求；polygon 坐标需闭合且单位统一；响应式下须在媒体查询中重写整个声明。
shape-outside 要起作用，必须配 float: left 或 float: right，缺一不可；否则浏览器直接忽略该声明，DevTools 里显示为 shape-outside: ignored。
为什么写了 shape-outside 却完全没反应
不是语法错，是布局前提断了。浏览器压根不进入形状计算流程：
-
float没显式声明：float: none、未写、或被后续 CSS 覆盖（比如框架重置）都等同于没设 - 元素仍是
display: inline：<img>默认 inline，底部有基线留白，建议加display: block - 宽高未固定：仅靠
max-width: 100%或aspect-ratio（Safari 15.4+ 才支持）不够稳，width和height必须都有值 - 父容器截断浮动传播：
overflow: hidden、contain: layout、display: flex或display: grid会创建新 BFC，让形状“不可见”
shape-outside: url() 引用 PNG/SVG 总回退成矩形
本地双击打开 HTML（file:// 协议）下，所有主流浏览器都会静默忽略 PNG 的 alpha 通道解析，这不是你导出问题，是协议限制：
- 必须跑在 HTTP 服务上，例如终端执行
python3 -m http.server，且服务端响应头含Access-Control-Allow-Origin: * - 优先改用内联 SVG：
shape-outside: url(#my-path)+ 页面底部<svg><defs><path id="my-path" d="M20,50 C30,20"></path></defs></svg>，完全避开 CORS 和 alpha 解析问题 - PNG 必须带 Alpha 通道、边缘无半透明噪点；可调
shape-image-threshold: 0.4包含更柔和边缘，但可能引入毛边 - 务必同步加
clip-path裁剪图片本身，否则视觉上还是矩形框，仅文字绕形——割裂感极强
shape-outside: polygon() 坐标总对不上
坐标系以该浮动元素自身左上角为原点，单位全部基于它当前的 width 和 height，不是父容器尺寸：
- 单位必须统一：全用
%（适合响应式，但需确保宽高比稳定）或全用px（Firefox 对小数敏感，建议用整数如10px，别写10.5px） -
polygon(0 0, 100% 0, 100% 100%, 0 100%)还是矩形；要“缺角”，得把对应顶点往里缩，比如右下角从100% 100%改成80% 80% - 描点顺序必须闭合（顺时针或逆时针），漏一个点就路径断裂，行为不可预测
- 调试必加两行：
outline: 1px solid red看浮动盒真实范围，再叠background: rgba(0,0,0,0.1)验证描点是否贴合预期
响应式下 shape-outside 容易崩在哪
它不会自动随缩放更新；图片尺寸一变，原 polygon() 或 circle() 就全偏了：
-
circle(100px)永远是 100px，哪怕图片已缩成 40px；polygon(50px 50px)在小屏上直接错位到屏幕外 - 必须在每个关键断点中**重写整个
shape-outside声明**，不能只改width；媒体查询里漏掉这一条，文字大概率塌陷到图下方 - iOS Safari 直到 16.4 才支持
path()，大量企业设备仍卡在 iOS 15.x；SVGd字符串别超 500 字符，Safari 解析失败不报错，只静默回退为矩形
overflow: hidden 或 display: flex 截断，shape-outside 就彻底失效——连 warning 都不抛，DevTools 里属性直接变灰。调试时第一件事，永远是检查浮动是否真传出去了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
