shape-outside没反应是因为缺少四个硬性条件：必须同时设置float:left/right、元素为块级显示、具有明确宽高、父容器未创建bfc（如overflow:hidden或flex/grid）；缺一即被浏览器忽略并显示“shape-outside: ignored”。
写了 shape-outside 却没反应？不是代码写错了，是四个硬性条件缺一不可——float、块级显示、明确宽高、父容器不截断浮动。
为什么 shape-outside 完全没生效
浏览器根本不会报错，DevTools 里该声明可能被划掉并显示 shape-outside: ignored。这不是语法问题，而是布局上下文缺失：
-
float没设：必须显式写float: left或float: right；float: none、未声明、或被后续样式覆盖 = 失效 - 元素是
display: inline：比如默认<img>在某些上下文中会退化为内联，得加display: block - 宽高没定死：仅靠
max-width: 100%不够，width和height必须都有值，或用aspect-ratio（Safari 15.4+ 支持） - 父容器创建了新 BFC：
overflow: hidden、contain: layout、display: flex或display: grid都会切断浮动传播，形状“不可见”
shape-outside: url() 加载 PNG 却还是矩形绕
这是本地开发最常踩的坑——浏览器静默降级，不提示、不报错、不警告：
-
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)+ HTML 中<svg><defs><path id="my-path" d="M..."></path></defs></svg>，100% 可控、无跨域、无协议限制
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看浮动元素真实范围，再叠background: rgba(0,0,0,0.1)验证描点是否贴合
响应式下文字突然塌到图下方怎么办
shape-outside 不会随缩放自动重算。图片变小了，circle(100px) 还是 100px，polygon(50px 50px) 还是原像素值——它只按初始盒模型计算一次：
- 放弃纯像素值，改用
%、vmin或calc()，例如polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%) - 每个关键断点必须重写整个
shape-outside声明，不能只调width；媒体查询里补上完整的shape-outside值 - 小屏建议简化或移除：iOS Safari 显示
shape-outside: ignored很常见，不如在@media (max-width: 480px)里设回shape-outside: none - 务必同步用
clip-path裁剪图片本身，否则视觉上还是矩形框，仅文字绕形，体验割裂
最容易被忽略的是：它不改变盒模型，也不触发浮动——float 是前提，shape-outside 只是“告诉文字怎么绕”。调试时先确认浮动是否生效，再看形状，最后才调描点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
