**有一些改動的時候，為了讓使用者熟知新的操作位置，往往會增加乙個引導，常見的方式就是使用乙個黑色的半透明蒙版，然後需要關注的區域是鏤空的。
然後上周五我去微雲轉悠的時候，也看到了引導層，於是職業病又犯了，去學習下別人是怎麼實現的。下面是觀測的結果：
為了實現鏤空蒙層效果，作者發揮了小時候拼積木的才能，使用兩層html結構，內層使用5塊獨立區域拼接形成，至於中間鏤空的區域的陰影則是使用的實現的。
雖然最終的效果滿足了產品的需求，對於使用者而言，目的已經達到。但是，從**質量層面、潛在的體驗提公升可能性、使用場景廣度上來講，還是弱了很多的。
舉例來說，如果我們某個提示區域面積很大，那中間的那個鏤空區域尺寸是不是要變，那後面的背景怎麼辦？搞新圖，有人看到了使用了background-size:cover, 那ie7,ie8怎麼辦？哦，可能微雲不需要管ie7, ie8.
如果不需要管ie7, ie8，那這裡的實現就顯得更加小白了。我們實際上只需要一層標籤，一層空標籤就可以實現我們的效果，且不需要。
主要在於思維方式的變化。拼積木這種想法大家都比較容易想到，符合日常認知，但是，但**層面，我們可以進行思維轉換，發散思考，偌大的半透明遮罩層，我們不要老想著背景色塊背景色塊，可以突破常規思維，把它認為是邊框，乙個很大很大的邊框（我們平時使用border都是1畫素巨多），這樣，我們自然就有了鏤空效果。
如下圖示意：
但是，目前我們中間的鏤空區域方的，有沒有什麼辦法變成圓的呢？
自然有，方法1是元素設定超大圓角，但是，此時為了邊框依然填滿整個螢幕，border邊框尺寸要大大增大，但是，為了不影響頁面的滾動條，我們必須再巢狀一層標籤，就顯得囉嗦了；
方法2則是方法1某些方面的逆向思維處理，就是把當前元素作為外層限制標籤，裡面重新生成乙個大尺寸偽元素，實現自適應尺寸的圓角效果，這個好，html乾淨不囉嗦，css一步到位（**如下示意）；
.cover::before大家可以看到，上面的偽元素的各個引數都是固定引數值，與外部元素的尺寸什麼的沒有任何關係，只要外部元素尺寸不超過400，裡面永遠會有乙個正橢圓的內陰影的鏤空圖形（因為超出部分會被
.cover隱藏），要理解圓角和正橢圓的關係，可以參考我之前的文章：「秋月何時了，css3 border-radius知多少？」。
眼見為實，耳聽為虛，您可以狠狠地點選這裡：一層標籤實現**引導鏤空蒙版功能demo （點選黑色蒙層會有引導切換效果）
demo這個鏤空蒙層所使用的html**如下：
沒錯，就這麼簡單，沒什麼巢狀，沒有什麼五個元素變形金剛合體，沒有使用。
微雲這張3k多，以微雲的使用者訪問量，估計流量費要不少錢的。
而且，大家如果點選蒙版，會發現，鏤空的區域大小每次都是不一樣的，有大有小，有高有瘦，而微雲的那個實現方法要滿足此需求就棘手；而且，大家發現沒，這些尺寸位置的變化都是動畫來動畫去的，不是嗙嗙嗙這種生硬的效果，更soft, 對使用者視覺引導效果更好，你看，我從這裡到這裡了，為什麼可以實現動畫效果呢，因為我們的鏤空和內陰影都是css實現的，而微雲的方法，顯然是無法有動畫的。
js**輔助
當然，我的實現也離不開js的輔助，js的工作很簡單，讓蒙層的width/height以及border大小和需要引導的元素相關聯。
我特意整了個可以公用的方法coverguide（命名不喜歡自己隨便改）：
var coverguide = function(cover, target) ); cover.isresizebind = true; } else if (window.attachevent) ); cover.isresizebind = true; // ie7, ie8 box-shadow hack cover.innerhtml = ''; } } } };這裡的
coverguide方法使用原生js實現，ie6+瀏覽器都是相容的，不依賴js庫，大家可以隨意使用。當然，寫得匆忙，沒有嚴格驗證，可能有bug，大家可以稍微留點心。
使用非常簡單，語法如下：
coverguide(cover, target);其中
cover就是.cover這個單獨的蒙版元素，target則是我們需要指引的元素，按鈕啊，導航什麼的。然後，我們的鏤空區域自動定位到target的位置，大小也是target元素的大小。超省心。
具體使用，可參考上面的demo，源**就在頁面上。
ie7,ie8怎麼辦
cover.innerhtml = '';我demo使用的這個長下面這樣：
大小還有陰影都是我自己隨手一搞的，旨在示意，真實專案大家可以向設計師索要。
然後，css超easy, 撐滿我們的cover就可以。
/* ie7, ie8 img */ .cover > img這種蒙版覆蓋思想呢，不僅僅適用於這種大面積的引導。我們上傳，尤其上傳頭像之後，要對頭像進行剪裁，常見的互動之一就是四周黑色，中間鏤空，也可以使用巨大
border來實現我們的效果，一層標籤足矣，根本不需要上下左右額外4層標籤拼接合體實現。
內部自適應的圓角效果單看文字，很多小夥伴估計不知道我在說些什麼，建議去demo頁面看下偽元素的**，真實區域大小和最終效果，估計就會明白了。
以上~
線性漸變實現蒙版遮罩
實現css3主要屬性 background linear gradient dir,color1,color2,先定義乙個線型漸變 background size 400 400 把線型漸變擴大，預設可視盒子的顏色就是線性漸變其中的一部分顏色 transition 5s all 增加過渡效果 hov...
android 漸變蒙版 iOS關於蒙版漸變的實現
有個需求，檢視的右邊需要漸隱，如下圖 這裡只是隨便拿個介面做下測試 paste image.png 要求整個view漸漸alpha變透明，包括view上的子view，需要一起變透明。拿起鍵盤就是幹 void testalpha self.view layoutifneeded uicolor col...
利用threshold實現的遮罩引導
點選 開始引導 則進入引導操作。除指定的按鈕可以操作外，其它區域均不可點選。這種應用當新功能或是新產品上線後，用來引導使用者來使用產品 功能，是十分有用的。facebook也有類似的引導，方法也很簡單 用4個絕對定位的div 指定乙個背景 一定透明度 遮住其它部分，這樣可以被操作的區域就 留空 出來...