今天把頁面遮罩的效果發一下，之前遮罩都是用JS實現的，忽然發現CSS3里面的box-shadow屬性除了做立體陰影外，還可以做頁面的遮罩.
下面來看一下完成的動態效果：
從上圖可以看出，就是當鼠標懸浮在按鈕上時，會出現整個頁面的遮罩，當然調一下透明度就是網頁中經常看到的當鼠標懸浮在一張圖片上時，周圍的其他圖片都被遮罩了，這樣就達到了突出這張圖片的效果，其實這個效果做出來很簡單.
一、主體程序：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/mask_layer.css" type="text/css"> </head> <body> <p></p> <div class="mask_layer"> <a href="#" target="_blank">透明遮罩</a> </div> </body> </html>
沒什么可說的，很簡單，自己看.
二、CSS樣式（主要是CSS3）
先來說一下原理：
box-shadow屬性: 水平陰影的位置 垂直陰影的位置 陰影模糊的程序 陰影的尺寸 陰影的顏色 是否為內陰影;
既然知道了原理，那么我們就可以在鼠標懸浮在框架上的時候讓陰影的尺寸比這個頁面還大，這樣就可以遮蓋了.
.mask_layer{
width: 200px;
height: 30px;
border: 1px #7ed2ed solid;
background: #7ed2ed;
text-align: center;
line-height: 30px;
position: relative;
z-index: 999;
}
.mask_layer a{
text-decoration:none;
color: #323232;
font-weight: bold;
}
.mask_layer:hover{
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
}
額.......看完樣式是不是想吐血，太簡單了,寫出來我都不好意思了,需要注意框架需要置於最上方，所以需要用到z-index屬性。