使用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/