shape-outside不触发浮动，仅定义文字环绕的边界，必须配合float:left/right生效；未设float时浏览器直接忽略，显示“shape-outside: ignored”。
它不“让”文字环绕，而是告诉浏览器：浮动元素的文本流边界不是矩形，而是你指定的形状。 这个属性本身不触发浮动、不改变盒模型、也不影响渲染，只重定义文字流动时的“不可进入区域”边界。
shape-outside 必须配合 float 才生效
这是最常被忽略的前提。写 shape-outside: polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%) 却没反应？大概率是因为没加 float: left 或 float: right。浏览器看到未浮动的元素，直接忽略该声明，DevTools 里会显示 shape-outside: ignored。
注意：float: none、未声明、或被后续样式覆盖（比如 display: flex 父容器导致子项自动 float: none），效果等同于没写。
-
float是唯一触发上下文的条件；position: absolute、display: inline-block、display: grid子项均不适用 - 元素需是块级替换元素，如
<img>（设float后自动块化），或显式设display: block的<div> <li>纯 <code><div> 若想用 <code>url()，得靠::before+content: url(...)生成替换内容shape-outside 的形状和视觉呈现是分离的
你看到的图片可能被
clip-path剪成五角星，但文字仍绕着shape-outside定义的圆形走——两者互不影响。想让文字贴合“所见即所得”的边缘，必须让两个路径一致，或干脆不用clip-path。常见误操作：
- 用
shape-outside: url(logo.png)但没配clip-path: url(#logo)→ 图片还显示矩形框，仅文字绕 PNG alpha 区域 - SVG 内联了
<path id="myPath"></path>，但写成shape-outside: url(#mypath)（ID 大小写错或含空格）→ 静默失败 - 给 SVG 元素加
transform: scale(0.8)→shape-outside读的是原始几何，不计算变换后位置
polygon() 坐标基准容易理解错
所有点都基于**该浮动元素自身的宽高**，不是父容器，也不是视口。单位混用、起点顺序错、顶点没内缩，都会导致“以为缺角，实际还是矩形”。
例如想切右下角，不能写
polygon(0 0, 100% 0, 100% 100%, 0 100%)（这是完整矩形），而要缩进右下顶点：polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)—— 注意这不是右下缺角，而是左下；真要右下，得把最后两个点改成80% 100%, 100% 80%并调整顺序。- 统一用
%：适合响应式，但所有坐标按当前元素尺寸解析，100% 100%永远是右下角 - 统一用
px：适合固定尺寸，Firefox 对10.5px这类小数敏感，建议全用整数 - 调试必加
outline: 1px solid red，再叠一层半透背景色，才能看清描点是否贴合预期轮廓
url() 加载失败几乎不报错
shape-outside: url(logo.png)在本地双击打开（file://协议）下基本必失效：浏览器拒绝读取 PNG 的 alpha 通道。必须跑在 HTTP 服务上（如python3 -m http.server），且响应头含Access-Control-Allow-Origin: *。PNG 本身也有坑：
- alpha 值必须 ≥
shape-image-threshold（默认 0.5）才计入轮廓；调低该值可包含半透区域，但可能引入噪点 - 避免抗锯齿毛边，推荐用单色透明背景（非渐变/模糊边缘）
- SVG 用
url()时，必须内联在 HTML 中，外部文件或 base64 编码均不支持 - Safari 解析
path()字符串超 500 字符会静默失败，只回退到矩形
真正难的不是写对语法，而是确认浏览器是否真的加载并解析了那个形状——它不报错、不警告，失败时就安静地退回矩形。调试时别只看 CSS 规则，得去 DevTools 的 Layout 面板里找 “Shape Outline” 是否亮起。
- 用
