一、微雲的實現
網站有一些改動的時候，為了讓用戶熟知新的操作位置，往往會增加一個引導，常見的方式就是使用一個黑色的半透明蒙版，然后需要關注的區域是鏤空的。
然后上周五我去微雲轉悠的時候，也看到了引導層，於是職業病又犯了，去學習下別人是怎么實現的。下面是觀測的結果：
為了實現鏤空蒙層效果，作者發揮了小時候拼積木的才能，使用兩層HTML結構，內層使用5塊獨立區域拼接形成，至於中間鏤空的區域的陰影則是使用的圖片實現的。
雖然最終的效果滿足了產品的需求，對於用戶而言，目的已經達到。但是，從代碼質量層面、潛在的體驗提升可能性、使用場景廣度上來講，還是弱了很多的。
舉例來說，如果我們某個提示區域面積很大，那中間的那個鏤空區域尺寸是不是要變，那后面的背景圖片怎么辦？搞新圖，有人看到了使用了background-size:cover, 那IE7,IE8怎么辦？哦，可能微雲不需要管IE7, IE8.
如果不需要管IE7, IE8，那這里的實現就顯得更加小白了。我們實際上只需要一層標簽，一層空標簽就可以實現我們的效果，且不需要圖片。
二、我的實現
主要在於思維方式的變化。拼積木這種想法大家都比較容易想到，符合日常認知，但是，但代碼層面，我們可以進行思維轉換，發散思考，偌大的半透明遮罩層，我們不要老想着背景色塊背景色塊，可以突破常規思維，把它認為是邊框，一個很大很大的邊框（我們平時使用border都是1像素巨多），這樣，我們自然就有了鏤空效果。
如下圖示意：
但是，目前我們中間的鏤空區域方的，有沒有什么辦法變成圓的呢？
自然有，方法1是元素設置超大圓角，但是，此時為了邊框依然填滿整個屏幕，border邊框尺寸要大大增大，但是，為了不影響頁面的滾動條，我們必須再嵌套一層標簽，就顯得啰嗦了；
方法2則是方法1某些方面的逆向思維處理，就是把當前元素作為外層限制標簽，里面重新生成一個大尺寸偽元素，實現自適應尺寸的圓角效果，這個好，HTML干凈不啰嗦，CSS一步到位（代碼如下示意）；
.cover::before { content: ''; width: 100%; height:100%; border-radius: 50%; border: 400px solid #000; position: absolute; left: -400px; top: -400px; /* 自己瞎填的參數，示意 */ box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75); }
大家可以看到，上面的偽元素的各個參數都是固定參數值，與外部元素的尺寸什么的沒有任何關系，只要外部元素尺寸不超過400，里面永遠會有一個正橢圓的內陰影的鏤空圖形（因為超出部分會被.cover隱藏），要理解圓角和正橢圓的關系，可以參考我之前的文章：“秋月何時了，CSS3 border-radius知多少？”。
眼見為實，耳聽為虛，您可以狠狠地點擊這里：一層標簽實現網站引導鏤空蒙版功能demo （點擊黑色蒙層會有引導切換效果）
demo這個鏤空蒙層所使用的HTML代碼如下：
<div class="cover"></div>
沒錯，就這么簡單，沒什么嵌套，沒有什么五個元素變形金剛合體，沒有使用圖片。
微雲這張圖片3K多，以微雲的用戶訪問量，估計流量費要不少錢的。
而且，大家如果點擊蒙版，會發現，鏤空的區域大小每次都是不一樣的，有大有小，有高有瘦，而微雲的那個實現方法要滿足此需求就棘手；而且，大家發現沒，這些尺寸位置的變化都是動畫來動畫去的，不是嗙嗙嗙這種生硬的效果，更soft, 對用戶視覺引導效果更好，你看，我從這里到這里了，為什么可以實現動畫效果呢，因為我們的鏤空和內陰影都是CSS實現的，而微雲的圖片方法，顯然是無法有動畫的。
JS代碼輔助
當然，我的實現也離不開JS的輔助，JS的工作很簡單，讓蒙層的width/height以及border大小和需要引導的元素相關聯。
我特意整了個可以公用的方法coverGuide（命名不喜歡自己隨便改）：
var coverGuide = function(cover, target) { var body = document.body, doc = document.documentElement; if (cover && target) { // target size(width/height) var targetWidth = target.clientWidth, targetHeight = target.clientHeight; // page size var pageHeight = doc.scrollHeight, pageWidth = doc.scrollWidth; // offset of target var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop), offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft); // set size and border-width cover.style.width = targetWidth + 'px'; cover.style.height = targetHeight + 'px'; cover.style.borderWidth = offsetTop + 'px ' + (pageWidth - targetWidth - offsetLeft) + 'px ' + (pageHeight - targetHeight - offsetTop) + 'px ' + offsetLeft + 'px'; cover.style.display = 'block'; // resize if (!cover.isResizeBind) { if (window.addEventListener) { window.addEventListener('resize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; } else if (window.attachEvent) { window.attachEvent('onresize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; // IE7, IE8 box-shadow hack cover.innerHTML = '<img src="guide-shadow.png">'; } } } };
這里的coverGuide方法使用原生JS實現，IE6+瀏覽器都是兼容的，不依賴JS庫，大家可以隨意使用。當然，寫得匆忙，沒有嚴格驗證，可能有bug，大家可以稍微留點心。
使用非常簡單，語法如下：
coverGuide(cover, target);
其中cover就是.cover這個單獨的蒙版元素，target則是我們需要指引的元素，按鈕啊，導航什么的。然后，我們的鏤空區域自動定位到target的位置，大小也是target元素的大小。超省心。
具體使用，可參考上面的demo，源代碼就在頁面上。
IE7,IE8怎么辦
如果你需要兼容IE7,IE8，我們不妨就方框效果；如果設計和產品接受不了，則可以使用圖片打個補丁，例如上面JS代碼部分的：
cover.innerHTML = '<img src="guide-shadow.png">';
我demo使用的這個圖片長下面這樣：
大小還有陰影都是我自己隨手一搞的，旨在示意，真實項目大家可以向設計師索要圖片。
然后，CSS超easy, 圖片撐滿我們的cover就可以。
/* IE7, IE8 img */ .cover > img { width: 100%; height: 100%; }
三、結束語
這種蒙版覆蓋思想呢，不僅僅適用於這種大面積的引導。我們上傳圖片，尤其上傳頭像之后，要對頭像進行剪裁，常見的交互之一就是四周黑色，中間鏤空，也可以使用巨大border來實現我們的效果，一層標簽足矣，根本不需要上下左右額外4層標簽拼接合體實現。
內部自適應的圓角效果單看文字，很多小伙伴估計不知道我在說些什么，建議去demo頁面看下偽元素的代碼，真實區域大小和最終效果，估計就會明白了。
感謝閱讀，歡迎交流，歡迎提供更好的實現方法，一定有的，只是我功力不夠。
以上~
