shape-outside写了却没反应，是因为它必须搭配float:left/right才生效，单独声明无效；常见失效原因包括未设float、元素为inline、宽高未固定、父容器含overflow:hidden或contain:layout。
shape-outside 为什么写了却完全没反应
不是代码写错了，而是浏览器根本没执行它——shape-outside必须搭配float: left或float: right才生效，单独声明等于白写。常见失效路径有四个：float没设（或被覆盖成none）、元素是display: inline、宽高没固定、父容器用了overflow: hidden或contain: layout。
调试时直接看 DevTools Styles 面板：shape-outside如果被划掉或显示为none，说明前提条件不满足；加一句outline: 1px solid red能立刻确认浮动区域是否真被创建出来。
用 polygon() 描点总对不上，坐标单位怎么选
polygon()的坐标系基于该浮动元素自身的宽高，不是父容器尺寸。混用%和px、起点顺序错、或顶点没闭合，都会导致形状翻转或偏移。
- 响应式优先用
%：比如polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)是左下缺角，不是右下 - 固定尺寸用
px：Firefox 对小数敏感，10.5px可能解析失败，统一用整数如10px - 别写
polygon(0 0, 100% 0, 100% 100%, 0 100%)——这还是矩形；要“缺角”，得把对应顶点往里缩，比如右下角从100% 100%改成80% 80%
shape-outside: url() 引用 PNG 为什么总是降级成矩形
本地双击打开 HTML（file://协议）下，Chrome/Firefox/Safari 全部静默忽略 PNG 的 alpha 通道，shape-outside直接回退到矩形——这不是你导出的问题，是协议限制。
必须跑在 HTTP 服务上，比如终端执行python3 -m http.server；同时确保服务返回Access-Control-Allow-Origin: *头，否则跨域图片也会降级。
更稳妥的做法是改用内联 SVG：shape-outside: url(#my-path) + HTML 中<svg><defs><path id="my-path" d="M0,0 L100,0..."></path></defs></svg>，完全避开 CORS 和 alpha 解析问题。
文字贴着形状边缘太挤，shape-margin 怎么调才自然
shape-margin不是margin，它只控制文字内容到shape-outside轮廓的最小距离，不影响元素自身位置。默认值是0，多数场景建议从12px或0.75em起步。
注意：shape-margin不支持%，但可以用em适配字体缩放；如果同时设了margin-right: 30px和shape-margin: 20px，文字离轮廓是20px，但离元素右边框实际是50px。
最后别忘了同步加clip-path裁剪图片本身，否则图片还显示原矩形框，仅文字绕形——视觉上会非常割裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
