html引导蒙层,CSS实现镂空蒙层

html引导蒙层,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)