clip-path仅裁剪视觉，不改变点击区域；需用同尺寸同形状的absolute遮罩层配合pointer-events控制，确保两者坐标完全对齐且底层元素pointer-events: none。
clip-path 只裁剪视觉，不改变点击区域——这是最常被误用的核心事实。直接加 clip-path: polygon(...) 后发现“空白处还能点中”，不是 bug，是预期行为。
为什么 clip-path 无法控制点击热区
clip-path 是纯渲染层操作，DOM 几何边界（getBoundingClientRect() 返回的矩形）完全不受影响。浏览器事件系统永远基于原始盒模型分发 click/mouseover。
- 即使元素被
clip-path: circle(30%)裁成一个小圆点，它的可点击区域仍是原始宽高构成的矩形 - 子元素（如文字、图标）若未显式设置
pointer-events，也会继承父级的“全矩形响应”行为 - 移动端 touch 事件同样遵循此规则，不存在“自动适配裁剪轮廓”的例外
真正可行的点击区域控制方案：absolute 遮罩层
必须用一个与目标元素尺寸、位置、clip-path 完全一致的 position: absolute 层作为事件代理，配合 pointer-events 开关。
- 目标元素本身设
pointer-events: none，彻底关闭其事件捕获 - 遮罩层使用相同父容器（设
position: relative），宽高推荐用inset: 0而非width: 100%; height: 100%，避免缩放/字体变化导致错位 - 遮罩层必须同步目标元素的所有影响定位的属性：
transform、border-box、padding、box-sizing，漏一项就可能偏移 1px - 临时调试时加
background: rgba(0,0,0,0.1)，肉眼验证是否严丝合缝
clip-path 坐标单位选 % 还是 px？关键看场景
百分比坐标（如 polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%)）依赖元素自身尺寸，但容易在响应式或缩放中失准；像素值（如 polygon(0px 0px, 200px 0px, 200px 100px, 100px 200px, 0px 100px)）只在固定尺寸下可靠。
- 按钮、图标等尺寸固定的组件，优先用 px +
box-sizing: border-box，杜绝计算偏差 - 全屏背景、响应式卡片等需随容器缩放的，用 %，但必须确保父容器尺寸稳定（比如禁用
zoom、不用transform: scale()动态缩放） - 绝对禁止混用单位：
polygon(0% 0%, 200px 0, 100% 100px)在部分浏览器会降级或解析失败
Safari 兼容性与性能陷阱
Safari 对 clip-path 支持保守，尤其涉及动画或复杂路径时，极易触发重绘卡顿。
- 必须双写：
clip-path: polygon(...); -webkit-clip-path: polygon(...)，漏掉前缀即失效 - 避开
path()和带贝塞尔的inset(... round ...)，Safari 16.4 才开始有限支持 - 不要对
clip-path做transition，改用transform: translate()移动整个遮罩层，帧率更稳 - 若同时用了
mask-image，注意它优先级高于clip-path，裁剪顺序是先clip-path硬裁，再mask-image软叠
最易被忽略的细节：遮罩层和目标元素的 getBoundingClientRect() 必须完全一致。哪怕只是目标元素有 border: 1px solid 而遮罩层没同步，点击区域就会整体偏移 1px——这种问题在高 DPR 屏幕上更难肉眼察觉，只能靠 DevTools 实时比对数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
