shape-outside: polygon() 生效需同时满足三条件：float 值为 left/right、显式设置 width 和 height（非 max-/min-）、坐标单位统一（全 % 或全 px）；尖角由坐标点向内缩进形成，顺序错误会导致翻转；shape-margin 控制文字与轮廓间距，不影响元素位置；兼容性需 @supports 检测并手动降级。
shape-outside: polygon() 必须配合 float 和显式宽高
不加 float，polygon() 完全无效；设了 float 但没给 width 和 height，浏览器无法解析坐标基准，形状直接塌缩。常见错误是把图片写成 display: inline-block 或只设 max-width，结果文字还是绕矩形框。
必须满足三个条件才生效：
-
float: left或float: right -
width和height同时存在（不能用max-或min-替代） -
shape-outside: polygon(...)坐标单位统一（全用%或全用px）
尖角不是“画出来”的，是靠坐标点向内缩进实现的
比如想让右下角有个 20px 的尖角缺口，不是在右下角加一个点，而是把原本在 100% 100% 的点往左、往上挪——例如改成 80% 80%，再补上 100% 80% 和 80% 100% 这两个点，才能形成外凸的尖角轮廓。顺序错了会反向翻转形状，调试时建议先加 outline: 1px solid red 看浮动区域，再叠一层半透 background 验证描点是否贴合。
典型尖角多边形示例（右下缺角）：
shape-outside: polygon(0 0, 100% 0, 100% 80%, 80% 80%, 80% 100%, 0 100%);
注意：% 是相对于该浮动元素自身宽高，不是父容器；混用 % 和 px 会导致部分点失效。
shape-margin 不是 margin，但它影响尖角处的文字可读性
shape-margin 设的是文字到 polygon 轮廓的最小距离，不是元素外边距。尖角附近如果没留够空间，文字会挤在尖锐边缘上，阅读困难。设 shape-margin: 12px 后，文字自动退开 12px，但浮动元素本身位置不变。
几个实用建议：
- 尖角越锐利，
shape-margin值建议越大（至少 10–16px） - 用
em单位比px更稳，字体缩放时缓冲区能同步变化 - 它和
margin叠加生效：若同时设margin-right: 20px和shape-margin: 12px，文字离轮廓是 12px，离右边框实际是 32px
兼容性和降级必须手动处理，别指望自动回退
截至 Chrome 149（2026年6月发布），polygon() 在主流桌面浏览器支持良好，但 Safari iOS 17 以下、Firefox Android 仍存在渲染偏差或完全忽略。更关键的是：没有 CSS fallback 机制——@supports 能检测 shape-outside，但无法检测 polygon 描点是否真正生效。
稳妥做法只有两种：
- 用
@supports (shape-outside: polygon(0 0))包裹整套规则，并为不支持环境单独写margin留白 - 尖角效果仅用于装饰性图文，核心文案流必须保持矩形环绕可用（即不依赖尖角实现信息传达）
最常被忽略的一点：动态内容（如用户上传图片后 JS 重绘 polygon）下，坐标需重新计算并重设样式，DOM 更新不会触发 shape 自动重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
