css 遮照鏤空效果

實現這個效果有以下幾種方式。(歡迎指出不足之處！！！) 

一：最簡單最粗暴的方法！截圖！

　　實現原理：先截一張圖片，然后寫一個遮罩層，再把圖片放上去就可以了！

　　過程過於簡單，就別寫代碼跟截圖效果了！

　　優點：簡單方便，適合各種頁面。並且兼容性極好。

　　缺點：圖片浪費項目空間。並且需要每次都壓縮一下，有些麻煩。

 

二：利用css3的陰影效果。

效果：

　　代碼如下：

<div class="mask"></div>

.mask {
　　position: absolute;
　　top: 350px;
　　right: 244px;
　　width: 155px;
　　height: 80px;
　　filter: blur(15px);
　　border-radius: 60px;
　　box-shadow: 0 0 0 2000px rgba(0,0,0,.6);
}

實現原理：利用陰影覆蓋，就可以實現其鏤空效果

優點：不受頁面限制，實現方便。在不考慮IE9以下的情況下完美的選擇

缺點：由於 是使用了css3的陰影特效。所以只兼容IE9以及以上的瀏覽器，而且，在其陰影部分。可以點擊到下面的元素，也就是無法屏蔽其他點擊效果。

解決方法：可以考慮將其寫在一個遮照層上面。

 

三：利用css的邊框屬性

　　實現效果同陰影

<div class="class3"></div>

.class3{
      position: absolute;width:170px;height:190px;top: 0;left: 0;
      border-left-width:208px;border-left-style: solid;border-left-color:rgba(0,0,0,.6);
      border-right-width:970px;border-right-style: solid;border-right-color:rgba(0,0,0,.6);
      border-top-width:260px;border-top-style: solid;border-top-color:rgba(0,0,0,.6);
      border-bottom-width:253px;border-bottom-style: solid;border-bottom-color:rgba(0,0,0,.6);
}

實現原理：利用邊框屬性鋪滿整個屏幕

優點：實現方便，兼容性好,可以兼容到IE6、IE7；適合任何頁面，不會受頁面的限制。

缺點：需要做兼容，並且實現過程比較復雜，要考慮到的元素也多

 

四：最麻煩的一個，利用canvas的繪圖功能

效果一：

　　具體多種實現效果參考 ： https://juejin.im/post/5c1da8bc6fb9a049c2326a55 

　　優點：可以同時鏤空很多個。

　　缺點：實現過程復雜。兼容性也不好

 

五：遮罩層加box

效果：

<div class="box1" style="background: #333;"></div>
<div class="hole"></div>

.hole {
  width: 160px;
  height: 160px;
  position: relative;
  background: blue;
  border-radius: 100px;
  top: 100px;
  left: 100px;
  opacity: .4;
}

.box1{
    height:100%;width:100%;
    border: 1px solid green;
    position:fixed;
    opacity: .1;
}

 

原理：在一層蒙板上面加一個盒子就可以了，最經常使用的應該就是這個了

優點：兼容性完美。實現簡單，

缺點：暫無

PS：以上代碼只是為了實例。一些沒完全修改成需要效果，請自行修改！