TOC
后续更新: 事实上大家如果有这个需求可以先去看看 css 里的 clip-path，是个更好的选择！
最近在工作中要去做一个类似于一些软件游戏里面的引导的效果。
其实这个最大的难度就是在前端真正意义上实现这个穿透效果。毕竟我们没有能力在一个元素上挖个洞不是吗。
我给大家我的实现思路，你看到那块纯透明的东西呢，其实他是整个盒子的content区域，外面的遮罩层其实是这个盒子的Border区域，你需要动态的计算撑满整个页面改元素的Border-top/left/right需要多高。底部可以不用计算，给一个很大的值，然后外围容器用overflow去切就OK。
我这里给出我的计算方式，你不一定适用，可以用来参考。
initArea () {
// offsetTop基于最近的外层元素 面对复杂包裹的情况会有问题
// 所以用getClientRects这组API结合根文档进行组合计算
window.dom = this.dom
const {top, left, width, height, right} = this.dom.getClientRects()[0]
const htmlTop = document.documentElement.getClientRects()[0].top
const htmlRight = document.documentElement.getClientRects()[0].right
this.guideTop = 0
this.guideLeft = 0
this.guideWidth = width - 10
this.guideHeight = height - 10
this.guideBorderTopWidth = Math.abs(htmlTop) + top - 5
// 下边框根据上面的信息无法计算 所以直接给一个很大的值 让包裹层去腰斩
this.guideBorderBotWidth = 10000
this.guideBorderLeftWidth = left - 5
this.guideBorderRightWidth = Math.abs(htmlRight) - right - 5
},
整篇文章比较简短，不过我相信如果你需要实现这个效果的话，应该很快就能理解其原理