shape-outside 起作用必须同时满足四个条件：显式设置 float: left/right；元素不能是 inline 显示（推荐 img 加 display: block）；必须有明确宽高（width/height 设死或用 aspect-ratio）；父容器不能创建新 BFC（如 overflow: hidden、flex/grid 等）。
shape-outside 要起作用，必须搭配
float，否则浏览器直接忽略该声明，连报错都不会有。
为什么写了 shape-outside 却完全没反应
这不是语法问题，而是四个硬性条件缺一不可：
-
float: left 或 float: right 必须显式声明；float: none、未写、或被后续样式覆盖 = 失效
- 元素不能是
display: inline；<img alt="怎么用CSS实现一个不规则形状的文字环绕排版？" > 推荐加 display: block，避免底部留白干扰对齐
- 必须有明确宽高：
width 和 height 都得设死，仅靠 max-width: 100% 不够；aspect-ratio 可替代但 Safari 15.4+ 才支持
- 父容器不能创建新 BFC：比如含
overflow: hidden、contain: layout、display: flex 或 display: grid，这些都会切断浮动传播，让形状“不可见”
DevTools 里若看到
shape-outside 被划掉并显示
ignored，基本就是以上某条没满足。
shape-outside: 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) 验证描点是否贴合预期
shape-outside: url() 引用 PNG/SVG 为什么还是矩形绕
这是本地开发最常踩的坑——浏览器静默降级，不提示、不报错、不警告：
-
file:// 协议下全挂：Chrome/Firefox/Safari 均拒绝解析 PNG alpha 通道；必须起 HTTP 服务，例如 python3 -m http.server
- 跨域图片缺 CORS：服务端响应头必须含
Access-Control-Allow-Origin: *，否则直接回退矩形
- PNG 实际无有效 alpha：导出时确认“保留透明度”，用 Figma 或 GIMP 检查 alpha 通道是否真为 0
- 优先改用内联 SVG：
shape-outside: url(#my-path) + HTML 中 <svg><defs><path id="my-path" d="M..."></path></defs></svg>；100% 可控、无跨域、无协议限制
shape-margin 不是 margin，别当边距用
shape-margin 是文字与
shape-outside 轮廓之间的“呼吸区”，只控制环绕路径的偏移量，不影响元素自身位置：
- 设
shape-margin: 20px，文字不会被“推开”，而是紧贴着这个 20px 缓冲带流动
- 值支持
px、em、rem，不支持 %；字体动态变化时，em 比 px 更适应
- 和
float 元素自身的 margin 叠加生效：若同时设了 margin-right: 30px 和 shape-margin: 20px，文字离形状轮廓是 20px，但离浮动元素右边框是 50px
兼容性仍是硬伤：Safari 直到 16.4 才支持
url() 和
polygon()，iOS Safari 16.0 及更早版本全不认。关键文案流里，别赌它一定生效。
