添加一個(gè)元素用border去做蒙層，鏤空部分用width, height 或者 padding去控制。父級(jí)設(shè)置一個(gè)寬高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 //注意需用標(biāo)準(zhǔn)盒模型，寬高才會(huì)生效

以上便是一個(gè)簡(jiǎn)單的鏤空蒙層。若需要定位到某個(gè)元素上面，多層頁(yè)面引導(dǎo)功能，配合js實(shí)現(xiàn)，樣式也重新定義下

css思路，用flex布局讓span標(biāo)簽整體，span標(biāo)簽border設(shè)置超級(jí)大！！
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 //注意需用標(biāo)準(zhǔn)盒模型，寬高才會(huì)生效

js代碼（react版本）具體使用自由配置

function getElementTop (elem) {
var elemTop=elem.offsetTop;//獲得elem元素距相對(duì)定位的父元素的top
elem=elem.offsetParent;//將elem換成起相對(duì)定位的父元素
while(elem!=null){//只要還有相對(duì)定位的父元素
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
}
}

// 創(chuàng)建span用于轉(zhuǎn)換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參數(shù)選填其一，也可都傳
args: {width: '1rem', height: '1rem', padding: '5px', left: '10px', top: '10px'} //傳樣式定位置
el: dom, //傳dom節(jié)點(diǎn)
close： true/false //此次點(diǎn)擊是否關(guān)閉蒙層 非必傳
}, () => {
//點(diǎn)擊的回調(diào)函數(shù) 非必傳
})