如何利用CSS shape-outside属性实现文字环绕不规则图片？

先说结论：shape-outside 要生效，必须配合 float: left 或 float: right，缺一不可；否则浏览器直接忽略声明，DevTools 中会显示 “shape-outside: ignored”。这不是写法错误，而是布局前提未满足。

为什么写了 shape-outside 却完全没有反应？

最常见的原因就是只加了形状、未设置浮动。这个属性本身不触发浮动，只修饰已浮动元素的轮廓。需要特别注意以下几点：

• float 必须显式声明——float: none、未设置、或被后续 CSS 覆盖（比如框架重置），都等同于未设置。
• 默认是 display: inline，需确保它已块化：通过 float 自动块化即可，不必额外添加 display: block，但若包裹在
  或
  中，需确认浮动作用于 本体上。
• 父容器使用了 overflow: hidden、contain: layout、display: flex 或 display: grid，会裁剪浮动传播区域，导致形状“不可见”。
• 图片未设置明确的宽高：width 和 height 缺一不可；仅靠 max-width: 100% 或 aspect-ratio（Safari 15.4+ 才支持）不够稳定。

使用 shape-outside: url() 引用 PNG/SVG 时，为何总回退为矩形？

本地双击打开 HTML（file:// 协议）时，所有主流浏览器都会静默忽略 PNG 的 Alpha 通道解析，shape-outside 直接降级为矩形——这不是导出问题，而是协议限制。正确做法如下：

• 必须运行在 HTTP 服务上，例如终端执行 python3 -m http.server；服务端响应头需包含 Access-Control-Allow-Origin: *，否则跨域图片也会失效。
• 优先改用内联 SVG：shape-outside: url(#cat-clip) + 页面底部 ，完全避开 CORS 和 Alpha 解析问题。
• 路径字符串不要超过 500 字符，iOS Safari 解析失败不报错，仅静默回退；从 Figma 导出后，手动提取 d 值，删除换行和多余空格。
• 务必同步添加 clip-path 裁剪图片本身，否则图片仍显示原矩形框，仅文字绕形——视觉割裂感极强。

polygon() 描点总对不上，坐标单位如何选择？

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 查看浮动元素真实范围，再叠加一层 background: rgba(0,0,0,0.1) 验证描点是否贴合预期。

实际落地中最常遇到的挑战

真正困难的不是写对语法，而是让浮动上下文稳定存在——编辑器里 DOM 频繁重排、移动端视口缩放、服务端返回的宽高值是百分比而非像素，这些才是实际落地时最常卡住的地方。