shape-outside生效需同时满足三个条件：设置float:left/right、作用于块级替换元素（如img）、元素尺寸确定；缺一不可，否则被浏览器忽略。
shape-outside 本身不生效，除非你同时写了 float: left 或 float: right，且作用对象是块级替换元素（比如 <img>）——漏掉任一条件，浏览器直接忽略该声明。
为什么写了 shape-outside 却没反应？
最常见失效路径就是“只设形状、不设浮动”。shape-outside 不是独立布局属性，它只是修饰已浮动元素的环绕轮廓。浏览器不会因为你写了 shape-outside: polygon(0 0, 100% 0, 50% 100%) 就自动把图片推到左边。
-
float必须显式声明为left或right；float: none、未设置、或被后续规则覆盖，都等同于没写 -
<img>默认是 inline 元素，但加了float后会自动变成块级盒，无需额外加display: block - 若用在
<div>上，必须满足：有float、有明确宽高（width/height或aspect-ratio）、且是替换元素（如含<svg>或伪元素::before+content: url()） - 本地双击打开的 HTML（
file://协议）下，shape-outside: url(logo.png)几乎必失效——浏览器拒绝读取 PNG 的 alpha 通道，必须部署到 HTTP 服务（如python3 -m http.server），并确保响应头含Access-Control-Allow-Origin: *
url()、polygon()、path() 怎么选？
真正能表达“异形”的只有这三类值。circle() 和 ellipse() 只生成规则几何形，无法贴合锯齿、手绘或镂空边缘。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
url()最实用：指向透明背景 PNG 或 SVG，浏览器按 alpha > 0 的像素区域生成轮廓；注意图片必须同源或带 CORS，否则降级为矩形 -
polygon()适合简单剪裁，如三角形头像：shape-outside: polygon(0 0, 100% 0, 100% 100%)；坐标基于元素盒模型，单位支持%、px等 -
path()灵活性最高，但兼容性要求 Chrome 102+、Firefox 111+、Safari 16.4+；适合复杂轮廓：shape-outside: path('M0,0 L100,0 L100,100 Z')
文字还是不贴边？检查这几个干扰点
即使语法全对，文字也可能漂在图片下方、或保持矩形环绕——问题往往出在布局上下文。
立即学习“前端免费学习笔记（深入）”；
- 文字内容必须是普通流内的块级元素（如
<p>、<div>），不能是display: flex或display: grid容器——它们创建新 BFC，切断环绕逻辑 - 文字元素自身不能设
clear: both或类似值，否则直接跳过整个浮动区域 -
shape-margin默认为0，若误设过大（如1em），文字会离形状太远；调试时建议先清零 - 图片父容器若设了
overflow: hidden或contain: layout，可能截断形状传播，临时移除再试 - DevTools 中给图片加
outline: 1px solid red，可直观确认形状是否按预期渲染
最容易被忽略的是：shape-outside 的计算依赖元素盒模型尺寸，而 max-width: 100% 这类响应式写法在浮动上下文中可能破坏宽高确定性——务必用固定值或 aspect-ratio 锁定尺寸，否则轮廓会算错或不渲染。
