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

shape-outside生效必须同时满足float:left/right，否则被忽略；需确保元素块化、父容器不剪裁浮动、图片有明确宽高、URL路径合法且同步clip-path，polygon坐标单位需统一。

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

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

最常见原因就是只加了形状、没设浮动。这个属性本身不触发浮动，只修饰已浮动元素的轮廓。

• float 必须显式声明——float: none、未设置、或被后续 CSS 覆盖（比如框架重置），都等于没写
• 默认是 display: inline，需确保它已块化：靠 float 自动块化即可，不必额外加 display: block，但若包裹在 <figure> 或 <div> 里，得确认浮动作用在 <img> 本体上
• 父容器用了 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) + 页面底部 <svg><defs><clipPath id="cat-clip"><path d="M20,50 C30,20..."></clipPath></defs></svg>，完全避开 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 频繁重排、移动端视口缩放、服务端返回的宽高值是百分比而非像素，这些才是实际落地时最常卡住的地方。