纯CSS实现高亮蒙层的核心是fixed全屏蒙层+clip-path inset“挖洞”镂空，需用ResizeObserver和getBoundingClientRect动态更新位置，配合pointer-events分层解决点击穿透，z-index和SSR适配不可少。
怎么用 CSS 实现元素高亮 + 蒙层遮罩
核心思路是：用一个全屏 div 作为蒙层，再用 position: absolute 叠加一个镂空（透明）区域，把目标元素“露出来”。不是靠 JS 动态截图或 canvas，纯 CSS 就能跑通。
关键点在于蒙层本身要盖住整个视口，而高亮区其实是“挖洞”——用 clip-path 或多层 box-shadow 模拟，但最稳的是 clip-path 配合 inset()。
- 蒙层
div必须设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7) - 高亮区域不能靠 margin/padding 推，得用
clip-path: inset(top right bottom left round radius)精确裁出矩形孔 - 目标元素需有稳定坐标（比如已定位或可
getBoundingClientRect()获取），否则clip-path值会错位 - 不支持
clip-path的老浏览器（如 IE）得降级为多 div 拼“井字架”，但现代项目基本不用管
如何用 JavaScript 动态计算并更新高亮位置
用户滚动、缩放、响应式重排后，目标元素坐标就变了，静态写死的 clip-path 会偏移。必须监听变化并重算。
别用 scroll 频繁触发——性能差还容易漏帧。优先用 ResizeObserver 监听目标元素尺寸，配合 IntersectionObserver 判断是否在视口内；滚动时只在节流后调用 element.getBoundingClientRect()。
立即学习“前端免费学习笔记（深入）”；
- 每次重算前先
getBoundingClientRect()拿到目标元素相对于视口的top/left/width/height - 蒙层上的
clip-path值格式为：inset(${top}px ${right}px ${bottom}px ${left}px round 4px)，其中right = window.innerWidth - left - width，bottom = window.innerHeight - top - height - 注意：若目标元素有
transform或scale，getBoundingClientRect()已包含其影响，无需额外换算 - 首次渲染建议加
setTimeout(() => { updateClipPath() }, 0)，避开 Vue/React 初始化的 DOM 异步时机
点击穿透怎么处理：蒙层下元素还能被点中吗
默认情况下，蒙层会拦截所有鼠标事件，目标元素点不了。但引导场景常需要“点高亮区继续下一步”，这就得让点击精准落到目标上，而不是被蒙层吃掉。
最直接的办法是给蒙层加 pointer-events: none，但这样整个蒙层都失效了——你又没法在蒙层上放文字提示或按钮。所以得拆开：蒙层本体禁用事件，高亮区域单独用一个带 pointer-events: auto 的 div 覆盖。
- 结构上分两层：
div.overlay（pointer-events: none） +div.highlight-area（pointer-events: auto，绝对定位覆盖目标） -
highlight-area的background设为透明，只靠border或box-shadow做视觉高亮，避免遮挡 - 如果要支持点击高亮区触发动作，就在
highlight-area上绑click，别依赖原元素事件冒泡——蒙层已阻断路径 - 移动端要注意
touch-action: none可能导致滑动卡顿，慎加
Vue/React 里封装成可复用组件要注意什么
不要把蒙层逻辑写死在页面组件里。抽成独立组件时，最关键的不是“怎么显示”，而是“怎么和业务状态解耦”。
传入的 target 不能只接受 selector 字符串（容易查不到或查错多个），优先支持 Ref 对象（ref 或 useRef），fallback 再查 DOM。
- 组件内部用
useEffect/mounted初始化，用onUnmounted/useEffect cleanup清理 observer 和事件监听器，否则内存泄漏 - 高亮动画别用 CSS transition 搞
clip-path——浏览器不支持过渡，会突变；改用transform: scale()+ 半透明边框模拟“放大聚焦”效果更可靠 - z-index 必须显式设足够高（如
z-index: 9999），且确保没被父级transform或will-change创建新层叠上下文截断 - 服务端渲染（SSR）时，蒙层应默认
display: none，等客户端 hydration 后再根据状态 show，否则首屏闪一下黑幕
真正难的不是画出那个高亮框，而是让它始终对齐、不抢事件、不拖慢滚动、不和 z-index 战争打架。大部分问题出在坐标没实时更新，或者忘了清理 observer —— 这俩一漏，引导流程就卡在半路不动了。
