clip-path仅裁剪视觉区域，不改变盒模型尺寸和文档流；它只控制像素绘制，不影响布局计算、子元素定位及空间占用，但会创建新层叠上下文并影响性能与动画。
clip-path 裁剪的是视觉区域，不影响盒模型尺寸和文档流——这是它和 overflow: hidden 的本质区别，也是你敢用它的前提。
clip-path 为什么不会改变布局
它只控制“哪些像素被绘制”，不干预元素的 width、height、margin、padding 计算，也不影响子元素的定位参考系。被裁掉的部分依然占据空间，浮动、Flex 或 Grid 布局照常运行。
- 常见误判：给一个
div加了clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)（上半矩形），结果发现下方元素没上移——没错，就该这样，因为高度没变 - 副作用注意：clip-path 会强制创建新的层叠上下文，可能意外遮挡
position: fixed子元素或干扰z-index层级 - 性能提示：频繁动画
clip-path（尤其是polygon()）会触发重绘而非 GPU 加速，inset()动画更稳
polygon() 坐标写错就完全不生效
不是“裁得不对”，而是浏览器直接忽略整个声明——因为路径未闭合或顺序混乱，导致无法确定“内部”区域。
- 必须闭合：起点和终点不必重复写，但顶点需按顺时针或统一逆时针连成封闭图形，例如
polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) - 单位陷阱：
polygon()内部数值默认是百分比，100px这种写法在多数浏览器中无效；要用像素，得套calc()，如calc(100px) - 顺序翻车：混用顺/逆时针（比如
0% 0%, 100% 0%, 0% 100%, 100% 100%）在 Safari 中可能整块消失
inset() 是最安全的矩形裁剪方式
当你要做“内缩”“挖空”“圆角遮罩”这类操作，inset() 比 polygon() 更可靠、易读、易维护。
立即学习“前端免费学习笔记（深入）”；
- 基础语法：
inset( top right bottom left round border-radius )，四值可简写，round后跟圆角值 - 示例：
clip-path: inset(10% 5% 20% 15% round 8px)表示从上边内缩 10%、右边 5%、下边 20%、左边 15%，四个角圆角 8px - 兼容性好：iOS Safari 13.4+、Chrome 85+、Firefox 68+ 均原生支持，无需前缀
- 动画友好：可直接对
inset()的偏移值做transition，流畅度远超polygon()
path() 必须走 SVG 引用，不能硬写字符串
想用贝塞尔曲线或复杂星形？别试图在 CSS 里直接写 path("M0,0 Q50,50 100,0")——这语法根本不存在，浏览器会静默失败。
- 正确姿势：在 HTML 中内联一个
<svg></svg>，里面定义<clippath id="myPath"><path d="..."></path></clippath>，然后 CSS 写clip-path: url(#myPath) - 注意引用范围：
url(#myPath)必须指向同文档内的 ID，跨 iframe 或外部文件不生效 - Safari 限制：iOS 15.4 之前基本不支持
path()，哪怕加-webkit-前缀也无效；现在可放心用，但需测试目标最低系统版本 - 调试技巧：临时把
<clippath></clippath>改成<mask></mask>并加背景色，能直观看到路径是否描对
真正容易被忽略的，是 clip-path 和 transform 的坐标系冲突——一旦元素用了 scale() 或 rotate()，polygon() 的百分比坐标就不再基于原始盒模型，而是基于变换后的新尺寸。这时候要么把 clip-path 移到父容器上，要么在遮罩层上同步加相同 transform，否则视觉和点击区域必然错位。
