CSS遮罩層和陰影是在網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)中常用的技巧，用于增強(qiáng)網(wǎng)頁(yè)元素的效果。下面我們將介紹如何使用CSS創(chuàng)建遮罩層和陰影。

1. 遮罩層

.overlay{
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity: 0.5;
z-index: 9999; 
}

上述代碼中，由于overlay元素是fixed定位，因此它會(huì)覆蓋在網(wǎng)頁(yè)的所有元素上。透明度為0.5，這意味著我們可以在遮罩層上看到網(wǎng)頁(yè)下面的內(nèi)容，但是這些內(nèi)容會(huì)被遮罩層阻擋。此外，z-index屬性確保遮罩層位于所有其他元素的上方。

2. 陰影

.shadow{
-webkit-box-shadow: 0 0 10px #000; 
box-shadow: 0 0 10px #000; 
}

上述代碼中，我們使用了CSS的box-shadow屬性添加陰影到元素中。第一個(gè)值為水平偏移量，第二個(gè)值為垂直偏移量，第三個(gè)值為模糊半徑，最后一個(gè)值為陰影的顏色。通過(guò)調(diào)整這些值，我們可以得到不同的陰影效果。同樣地，我們可以使用-webkit-box-shadow屬性向老版本的WebKit瀏覽器添加支持。

總之，CSS遮罩層和陰影是web設(shè)計(jì)和開(kāi)發(fā)中常用的技巧，它們可以增強(qiáng)網(wǎng)頁(yè)元素的整體效果。在應(yīng)用這些技巧時(shí)，我們需要仔細(xì)調(diào)整樣式和屬性，以便獲得最理想的效果。