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>推荐加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 及更早版本全不认。关键文案流里，别赌它一定生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
