shape-outside本身不改变渲染，只定义文字绕行边界；必须配合float:left/right生效，否则被忽略。最常见失效原因：未设float、元素为inline、宽高不明确、父容器overflow:hidden等裁剪浮动区域。
shape-outside 本身不改变元素渲染，只定义文字绕行的边界；它必须配合 float 才生效，否则完全被忽略。
为什么写了 shape-outside 却没反应
不是语法写错，而是浏览器压根没启用这个属性。最常见原因有四个：
-
float没设——必须是float: left或float: right，float: none或未声明等于白写 - 元素是
display: inline（比如<span></span>）——得显式设成display: block或用<img>这类天然块级元素 - 宽高不明确——
width和height都得有值（或通过aspect-ratio固定），否则polygon()、circle()算不出坐标基准 - 父容器干扰——
overflow: hidden、contain: layout或contain: paint会裁剪浮动区域，让形状“不可见”
怎么用 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看浮动元素真实范围，再叠一层半透背景验证描点是否贴合预期
用 SVG <path></path> 时容易踩的坑
SVG 必须内联在 HTML 中（不能外链），且路径坐标系默认以元素左上角为原点，单位是 CSS 像素，不是 viewBox 的逻辑单位。
-
<svg></svg>得设width="0" height="0" style="position: absolute;"，避免占位干扰布局 -
<path></path>的d属性要落在元素尺寸范围内；建议先给浮动元素设固定宽高（如width: 200px; height: 200px;），再按此尺寸写路径 - 不要对 SVG 元素用
transform——shape-outside只读原始几何，不计算 transform 后位置 - 引用写法必须是
shape-outside: url(#myPath)，ID 名大小写敏感，且不能带空格或特殊字符
最常被忽略的是：shape-outside 的形状和元素视觉呈现可以完全分离——你用 clip-path 剪掉一块，文字仍绕着原始 shape-outside 轮廓走；想让文字绕着“看见的边”流动，就得让两者路径一致，或者干脆不用 clip-path，靠透明背景模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
