shape-outside 要生效必须搭配 float: left 或 right，且元素需为 block 级、宽高确定、父容器不创建新 bfc、后续内容为普通流块级元素；坐标基于自身宽高，调试需用 outline 和 background 验证。
shape-outside 要生效，必须搭配 float，缺一不可；否则浏览器直接忽略该声明，连控制台 warning 都不报。
为什么写了 shape-outside 却没反应？
不是语法错，而是布局前提断了。常见原因包括：
-
float没显式声明 —— 必须是float: left或float: right，float: none或继承值无效 - 元素是
display: inline（比如默认<img>）—— 需加display: block - 宽高未定 ——
width和height缺一不可；aspect-ratio可替代但 Safari 15.4+ 才支持 - 父容器截断浮动区 ——
overflow: hidden、contain: layout、display: flex或grid会创建新 BFC，形状传播被切断 - 文字不在普通流中 —— 后续内容要是
<p></p>、<div> 这类块级元素；<code>display: flex子项完全无视shape-outsideshape-outside: polygon()坐标怎么写才不跑偏？所有坐标都基于该浮动元素**自身宽高**，不是父容器尺寸。混用单位或顺序错，形状就彻底失真：
- 统一用
%：适合响应式，但需确保宽高比稳定（靠aspect-ratio或固定width/height）；例如polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)是左下缺角 - 别写
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: url()加载 PNG 却还是矩形绕？本地双击打开 HTML（
file://协议）下几乎必挂 —— 浏览器静默忽略 alpha 通道解析，不报错也不提示：- 优先改用内联 SVG：
shape-outside: url(#my-path)，配合 HTML 中<svg><defs><path id="my-path" d="M..."></path></defs></svg> - 若必须用 PNG，请部署到 HTTP 服务（如
python3 -m http.server），并确保响应头含Access-Control-Allow-Origin: * - 检查 DevTools Styles 面板：
shape-outside若被划掉或显示为none，说明加载失败或 CORS 拒绝 -
shape-image-threshold: 0.4可调低阈值，让半透边缘也参与轮廓生成（默认0.5）
移动端和响应式场景下怎么稳住效果？
像素单位在缩放后严重错位，文字可能直接掉到图下方：
- 放弃纯
px，改用%、vmin或calc()；例如polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%) - 媒体查询中必须重写整个
shape-outside声明 ——@supports不会自动适配，也不能靠继承 - iOS Safari 直到 16.4 才支持
url()和polygon()，16.0 及更早全不认；关键文案流里别赌兼容性 -
shape-margin不是边距，是文字与形状轮廓的“呼吸区”；设1em比12px更适应字体缩放
最易被忽略的点：形状本身不改变盒模型，只定义文字流动路径；而浮动上下文一旦被父容器或后续样式破坏，整个效果就归零 —— 调试时永远先确认
float是否真正生效，再查形状。 - 统一用
