shape-outside本身不触发浮动，仅定义已浮动元素的文字环绕路径；必须同时满足float:left/right、块级替换元素、明确宽高三个条件，缺一则被浏览器静默忽略，DevTools中显示为划掉或none。
shape-outside 本身不绕文字，它只告诉浏览器“文字该绕着哪条线走”——但前提是元素必须 float，否则整条声明被忽略。
为什么写了 shape-outside 却没反应
不是语法错，是布局前提断了。浏览器直接跳过该属性，DevTools 里显示为划掉或 none。
-
float没显式写：float: left或float: right缺一不可；float: none、未声明、靠继承或父级设置 = 无效 - 元素仍是
display: inline：<img>默认如此，底部有基线留白，务必加display: block - 宽高未定：仅靠
max-width: 100%或aspect-ratio（Safari 15.4+ 支持）不够稳；width和height必须同时存在，或用aspect-ratio+ 明确width - 父容器截断浮动传播：
overflow: hidden、contain: layout、display: flex或display: grid会创建新 BFC，形状“不可见”
用 polygon() 描不规则轮廓时坐标总对不上
坐标系以该浮动元素自身左上角为原点，单位基于自身宽高——不是父容器，也不是视口。
- 单位必须统一：
%相对自身尺寸，px是绝对像素；混用（如50% 20px）必错位 -
polygon(0 0, 100% 0, 100% 100%, 0 100%)还是矩形；要“缺角”，得把对应点往里缩，比如右下角从100% 100%改成80% 80% - 所有点必须顺时针或逆时针闭合；漏一个点、首尾重复、顺序乱，路径就不可预测
- 调试必加：
outline: 1px solid red看盒模型真实范围，再叠一层background: rgba(0,0,0,0.1)验证描点是否贴合
用 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)+ 页面底部<svg><defs><path id="my-path" d="M..."></defs></svg>，100% 可控且无跨域问题
移动端和响应式下 polygon() 坐标错位怎么稳住
图片缩放后，polygon(20px 50px, 180px 50px) 这类 px 值完全跑偏，因为它们不随缩放变化。
- 放弃纯
px，全部改用%：坐标基于图片自身宽高，只要宽高比稳定（靠aspect-ratio或固定width/height），就能自适应 - 媒体查询中必须重写整个
shape-outside声明：不能只改width就指望浏览器自动推导新路径；@media (max-width: 480px) { img { shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%); } } - iOS Safari 直到 16.4 才支持
shape-outside: path()；旧版（如企业内网常见 iOS 15.x）会静默忽略，应主动降级为ellipse()或circle()
最容易被忽略的是：shape-outside 定义的不是图形本身，而是文字流的外边界；它不裁剪图片、不移动元素、不改变盒模型——你看到图片还是矩形，只是文字悄悄绕开了。
