shape-outside 仅定义文字环绕边界且必须配合 float 生效；未设 float、元素非块级、宽高未定、父容器创建新 bfc 或文字不在普通流中均导致失效；url 形状需 http 服务与 cors 支持，推荐内联 svg；polygon 坐标基于自身尺寸，需统一单位并顺时针闭合；shape-margin 是文字与形状间的呼吸区，不影响元素定位。
shape-outside 本身不改变元素盒模型，只定义文字环绕的边界；它必须搭配 float 才生效，否则完全被忽略。
为什么写了 shape-outside 却没反应
不是语法错，而是布局前提缺失。浏览器直接跳过该声明，连 warning 都不报。
-
float没设：必须是float: left或float: right，float: none或未声明即失效 - 元素是
display: inline（比如<span></span>）：需显式设display: block或用<img>（自带块级行为） - 宽高未明确：
width和height缺一不可，aspect-ratio可替代但兼容性略低（Safari 15.4+） - 父容器截断浮动区：
overflow: hidden、contain: layout或display: flex/grid会创建新 BFC，切断形状传播 - 文字不在普通流中：后续内容要是
<p></p>、<div> 这类块级元素；<code>display: flex容器子元素直接无视shape-outsideshape-outside: url()为什么加载了 PNG 却还是矩形绕常见于本地开发或跨域场景，浏览器静默降级为矩形，不报错也不提示。
-
file://协议下全失效：Chrome/Firefox/Safari 均不解析 PNG alpha 通道，必须部署到 HTTP 服务（如python3 -m http.server） - 跨域图片缺 CORS 头：服务端需返回
Access-Control-Allow-Origin: *，否则降级 - 图片无有效 alpha 通道：导出时选“保留透明度”，用工具（如 Figma、GIMP）检查 Alpha 是否真为 0
- 优先改用内联 SVG：
shape-outside: url(#my-path)+ 内联<svg><defs><path id="my-path" d="..."></path></defs></svg>，100% 可控且无跨域问题
用
polygon()描点时坐标总对不上坐标系基于元素自身宽高，不是父容器，单位混用或起点顺序错会导致形状翻转或偏移。
- 单位必须统一：
%相对元素自身尺寸，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-margin和margin的区别shape-margin不是边距，它是文字与shape-outside轮廓之间的“呼吸区”，不影响元素自身位置。-
shape-margin: 12px表示文字沿形状外扩 12px 流动，不是把整个图片推远 - 若同时设
margin-right: 30px和shape-margin: 20px，文字离形状轮廓是 20px，但离图片右边框是 50px - 值支持
px、em、rem，不支持%；字体缩放场景建议用em -
padding和border对shape-outside无影响——它们不参与形状计算
真正容易被忽略的是：shape-outside 的形状计算发生在布局阶段，不响应 transform、filter 或 animation 中的几何变化；想动态调整，得靠 JS 重写 style 或切换预设 class，不能指望 CSS 动画驱动轮廓变形。
-
