使用css borer实现图层蒙版效果

需要js

思路：假设目标元素是target。在外层定义元素宽高等于target，通过border设置元素铺满整个文档，设置border的透明图，实现蒙版，在元素的内部设置子元素，宽高100%;设置圆角边框50%； 设置box-shadow inset显示

代码：

<span class="demo3">我的信息</span>
<div class="cover"></div>

css

.cover{
            position:absolute;
            border: 0 solid #000;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity: 0.75;
            overflow: hidden;
            display: none;//防止页面闪现大圆，在设置完元素的样式之后再显示

        }
        .cover::before{
            content:"";
            width:100%;
            position: absolute;
            height:100%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border:400px solid #000;
            left:-400px;
            top:-400px;
            box-shadow: 0 0 0 100px #000;
        }

js代码：

$(document).ready(function(){
        var w_w=$(document).width();//获取文档的宽度
        var w_h=$(document).height();//获取文档的高度
        var s_l=$(document).scrollLeft();//获取窗口左边滚动的距离
        var s_t=$(document).scrollTop();//获取窗口顶部滚动的距离
        var t_w=$(".demo3").width();//获取目标元素的宽度
        var t_h=$(".demo3").height();//获取目标元素的高度
        var o_l=$(".demo3").offset().left;//获取目标元素相对于当前窗口左边的距离
        var o_t=$(".demo3").offset().top;//获取目标元素距离当前窗口上部的距离
//设置蒙版元素的border
        $(".cover").show().css({"width":t_w+"px","height":t_h+"px","border-top-width":s_t+o_t+"px","border-right-width":(w_w-o_l-s_l-t_w)+"px","border-bottom-width":(w_h-s_t-o_t-t_h)+"px","border-left-width":o_l+s_l+"px"});
    //border-top-width：目标元素距离当前窗口上部的距离+窗口顶部滚动的距离

 //border-right-width：文档的宽度-目标元素距离当前窗口左边的距离-窗口左边滚动的距离-目标元素的宽度

 //border-bottom-width：文档的高度-目标元素距离当前窗口上部的距离-窗口顶部滚动的距离-目标元素的高度

 //border-left-width：目标元素距离当前窗口左边的距离+窗口左边滚动的距离

});

来自：http://www.zhangxinxu.com/wordpress/2016/03/better-black-mask-guide-overlay-method/