最新更新时间：05月13日13:41:01
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容：页面镂空遮罩层、页面镂空遮罩引导层、图片镂空遮罩
遮罩层实现点击穿透的方案
当点击遮罩层时需要触发下层元素的click事件，给遮罩层添加#mask{pointer-events: none;}样式即可，详情请参考文本参考资料常规遮罩层
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Title</title><style>.mask{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.4);display: flex;justify-content: center;align-items: center;z-index: 3;}.mask{position:fixed;top: 0;left : 0;bottom : 0;right : 0;background:rgba(0,0,0,.5); /*background:hsla(0,100%,80%,0.5)*//*background:#000; opacity:0.5; */}//模糊效果 毛玻璃效果.blur{-webkit-filter: blur(5px); /* Chrome, Opera */-moz-filter: blur(5px);-ms-filter: blur(5px); filter: blur(5px);}</style></head><style></style><body><div class='mask'></div></body></html>
镂空遮罩层效果如图
使用box-shadow实现镂空遮罩引导层效果
优点：
圆角轻松实现；box-shadow 不会影响元素位置，定位只需要根据 content 的位置写。
缺点：阴影可视区域无法触发click事件，因此，当点击蒙层任意区域，无法隐藏。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Title</title><style>.guide{position: absolute;z-index: 2;top: 0px;left: 50%;transform: translateX(-50%);width: 50px;height: 50px;border-radius: 50px;border: 3px solid #2353FA;box-shadow: 0px 0px 0px 1000px rgba(0,0,0,.75);box-sizing: border-box;}</style></head><style></style><body><div class='guide'></div></body></html>
使用border实现镂空遮罩引导层效果
缺点：代码量大
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Title</title><style>.guide{position: absolute;z-index: 2;.opacityEle{border: 700px solid rgba(0,0,0,0.75);width: 50px;height: 50px;position: relative;top: -700px;left: -538px;border-radius: 50%;.ele{width: 50px;height: 50px;border: 3px solid #0B6EFF;border-radius: 25px;box-sizing: border-box;}}}</style></head><style></style><body><div class='guide'><div class='opacityEle'><div class='ele'></div></div></div></body></html>
参考资料
pointer-events - CSS（层叠样式表） | MDN感谢阅读，欢迎评论^-^
