absolute元素加clip-path仍为矩形，因裁剪需父容器创建新层叠上下文（如overflow:hidden或transform:translateZ(0)），否则绘制上下文失效；百分比坐标基于自身宽高，须确保尺寸明确，且px单位在polygon()中不被支持。
clip-path 本身不提升层级，但配合 overflow: hidden 或 transform 可让 absolute 弹层真正被裁剪，避免视觉溢出和遮挡错乱。
为什么 absolute 元素加了 clip-path 还是矩形？
因为 clip-path 默认只在「绘制上下文」中生效，而 position: absolute 元素的父容器若未创建新层叠上下文，裁剪区域会被截断或忽略。
- 常见现象：
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%)写了但弹层边缘仍是直角 - 根本原因：父容器是
overflow: visible（默认值），裁剪框“撑开”到视口外，浏览器不执行裁剪 - 必须操作：给弹层的**直接父容器**加
overflow: hidden或transform: translateZ(0) - 别碰
z-index——它解决不了裁剪失效，只管层叠顺序
百分比坐标在 absolute 弹层里怎么算才准？
polygon() 中的 0%、100% 始终基于该元素自身的宽高（box-sizing: border-box 下的 content 区域），不是视口或父容器。
- 确保弹层有明确尺寸：比如设了
width: 320px; height: 240px，否则百分比会按 0 计算，路径塌缩 - 慎用
px单位：CSS 原生polygon()不支持px（inset()除外），写polygon(0px 0px, ...)会被忽略 - 响应式建议：用百分比 +
min-width/max-width控制边界，例如polygon(0% 0%, 100% 0%, 100% 90%, 70% 100%, 0% 90%)
Firefox 上弹层动画卡顿，怎么平滑过渡？
Firefox 对 clip-path: polygon() 的动画支持弱，硬件加速不充分，容易掉帧甚至冻结。
- 优先降级为
clip-path: inset()动画（如从inset(0)→inset(10px)），它全平台可 GPU 加速 - 避免在
will-change: clip-path上盲目加优化——Firefox 中基本无效 - 更稳方案：用
mask-image+linear-gradient模拟裁剪动画，或改用transform: scale()+overflow: hidden - 真要 polygon 动画？先检查 DevTools 的「Layers」面板，确认该弹层是否进入了独立合成层
裁剪后点击热区还是整个矩形，怎么对齐？
clip-path 只影响视觉，不改变事件热区——用户点在“被裁掉”的右上角空白处，依然会触发 click。
- 纯 CSS 解法：父容器设
pointer-events: none，再叠一层同尺寸同路径的，设fill="transparent" pointer-events="auto" - JS 解法：监听
click，用element.getBoundingClientRect()换算坐标，再套射线法判断是否在polygon()顶点围成区域内 - 别试
pointer-events: polygon(...)——这是废弃草案，所有浏览器都不识别 - 移动端特别注意：iOS Safari 对靠近裁剪边界的点击判定偏宽松，真机必测
最常被忽略的一点：裁剪后的弹层如果带阴影或描边，box-shadow 和 outline 仍按原始矩形渲染，可能穿出裁剪边界。需要额外用 filter: drop-shadow() 或 SVG
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
