CSS实现镂空蒙层

添加一个元素用border去做蒙层，镂空部分用width, height 或者 padding去控制。父级设置一个宽高100%的div，overflow: hidden 隐藏超出部分的border，以及定位显示镂空部分。
div
width: 100%
height: 100%
overflow: hidden
position: absolute
left: 0
top: 0
z-index: 1000
span
display: block
border: 100px solid rgba(0, 0, 0, .7)
padding: 10px
box-sizing: content-box //注意需用标准盒模型，宽高才会生效

以上便是一个简单的镂空蒙层。若需要定位到某个元素上面，多层页面引导功能，配合js实现，样式也重新定义下

css思路，用flex布局让span标签整体，span标签border设置超级大！！
div
width: 100%
height: 100%
overflow: hidden
position: absolute
left: 0
top: 0
z-index: 1000
display: flex
justify-content: center
align-items: center
span
display: block
border: 20rem solid rgba(0, 0, 0, .7)
padding: 10px
box-sizing: content-box //注意需用标准盒模型，宽高才会生效

js代码（react版本）具体使用自由配置

function getElementTop (elem) {
var elemTop=elem.offsetTop;//获得elem元素距相对定位的父元素的top
elem=elem.offsetParent;//将elem换成起相对定位的父元素
while(elem!=null){//只要还有相对定位的父元素
elemTop+=elem.offsetTop;
elem=elem.offsetParent;
}
return elemTop;
}

let cover = (obj, callBack) => {
let {args, el, close} = obj
if (args && el) {
if (args instanceof HTMLElement) {
let temp = args
args = el
el = temp
}
}

// 创建span用于转换rem为px
let coverNode = document.getElementById('cover_mask') || document.createElement('div'),
span = document.createElement('span'),
position = {
borderRadius: '50%',
square: true,
place: 'top',
}
coverNode.id = 'cover_mask'
span.style.position = 'absolute'
span.style.visibility = 'hidden'
span.style.opacity = 0
span.style.width = '1rem'
span.style.height = '1rem'

el = el || args
if (el && el instanceof HTMLElement) {
span.style.left = el.offsetLeft + 'px'
span.style.top = getElementTop(el) + 'px'
span.style.width = el.offsetWidth + 'px'
span.style.height = el.offsetHeight + 'px'
}

if (args && !(args instanceof HTMLElement)) {
for (let i in args) {
span.style[i] = args[i]
position[i] = args[i]
}
}

document.body.appendChild(span)

let topSite = -document.documentElement.clientHeight / 2 + span.offsetHeight / 2 + span.offsetTop,
leftSite = -document.documentElement.clientWidth / 2 + span.offsetWidth / 2 + span.offsetLeft

document.body.removeChild(span)
let h = position.place === 'center' ? 0 : 10 / 320 * document.documentElement.clientWidth
let square = span.style.height > span.style.width ? span.style.height : span.style.width
position.transform = 'translate(' + leftSite + 'px, ' + (topSite + h) + 'px)'
position.padding = parseInt(square) / 2 + 10 / 320 * document.documentElement.clientWidth + 'px'
position.width = '0' // position.square ? square : span.style.width
position.height = '0' // position.square ? square : span.style.height

ReactDOM.render(
<div>
<span className="cover_span" style={position} onClick={() => {
if (callBack) callBack()
if (close) document.body.removeChild(coverNode)
}}></span>
</div>,
coverNode
)

if (!document.getElementById('cover_mask')) document.body.appendChild(coverNode)
}

//cover({
// args,el参数选填其一，也可都传
args: {width: '1rem', height: '1rem', padding: '5px', left: '10px', top: '10px'} //传样式定位置
el: dom, //传dom节点
close： true/false //此次点击是否关闭蒙层 非必传
}, () => {
//点击的回调函数 非必传
})