首頁 > 開發者 > JavaScript
CSS3學習筆記（5）—頁面遮罩效果，css3學習筆記
今天把頁面遮罩的效果發一下，之前遮罩都是用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屬性。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
