shape-outside 要生效必须搭配 float，且元素需满足四条件：浮动声明、非 inline 显示、明确宽高、父容器无 overflow: hidden 或 contain: layout。
shape-outside 要起作用，必须搭配 float —— 单独写它，浏览器直接忽略。
为什么写了 shape-outside 却没反应？
最常见原因不是语法错，而是元素没进浮动上下文。必须同时满足以下四点：
-
float: left或float: right（float: none或未声明 = 无效） - 元素不能是
display: inline；<img>推荐显式加display: block，避免底部留白干扰对齐 - 必须有明确宽高：
width和height，或用aspect-ratio固定比例；否则polygon()、path()等无法锚定坐标系 - 父容器不能含
overflow: hidden或contain: layout—— 它们会裁剪浮动区域，让形状“不可见”
polygon() 坐标单位怎么选才不翻车？
所有点都按**该浮动元素自身的宽高**为基准，不是父容器尺寸。混用单位或顺序错，形状就完全跑偏：
- 统一用
%：适合响应式，但得确保图片宽高比稳定（否则缩放后点位失准），例如polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)是左下缺角 - 统一用
px：适合固定尺寸场景；Firefox 对小数敏感，建议全用整数（如10px，别写10.5px） - 别写
polygon(0 0, 100% 0, 100% 100%, 0 100%)—— 这仍是矩形；要实现“缺角”，得把对应顶点往内缩，比如右下角从100% 100%改成80% 80% - 调试时加
outline: 1px solid red看浮动元素真实范围，再叠一层半透背景验证描点是否贴合预期
用 url() 引用 PNG 为什么常失效？
shape-outside: url(logo.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）
移动端和响应式场景下怎么稳住效果？
图片缩放后，polygon(50px 50px, ...) 这类绝对单位路径会严重错位，文字可能直接掉到图下方：
- 放弃纯像素值，改用
%、vmin或calc()，例如polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%) - 在媒体查询中**必须重写整个
shape-outside声明**，不能只改width；浏览器不会自动推导新尺寸下的等效路径 - 小屏（如
max-width: 480px）建议直接关掉：shape-outside: none，并配clear: both防止布局断裂 - iOS Safari 16.4+ 才支持
path()；旧版降级用polygon()或ellipse()，别强求复杂轮廓
shape-outside，而是当图片尺寸随视口变化、父容器套了三层 wrapper、设计师又临时换了一张锯齿边缘的 PNG 时，还能快速定位到底是 float 被覆盖了，还是 overflow: hidden 悄悄截断了浮动传播——这些地方一漏，整个环绕就崩成矩形。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
