當(dāng)我們?cè)谶M(jìn)行頁(yè)面布局或者進(jìn)行樣式調(diào)整的時(shí)候，可能會(huì)遇到一些元素需要同時(shí)應(yīng)用不同的樣式，而這些樣式都需要有各自的優(yōu)先級(jí)。在這種情況下，我們就需要使用CSS的圖層概念來(lái)進(jìn)行處理。

CSS的圖層概念實(shí)際上是將網(wǎng)頁(yè)中的元素分為多層，每一層都可以有自己的樣式和屬性，而這些層之間的先后順序和重疊關(guān)系則由z-index屬性來(lái)控制。當(dāng)一個(gè)元素需要同時(shí)應(yīng)用多個(gè)樣式或者多個(gè)元素需要互相重疊時(shí)，我們就可以使用圖層來(lái)優(yōu)化樣式處理。

/* 示例1：為一個(gè)元素同時(shí)添加多個(gè)背景圖片 */
.box {
background-image: url(bg1.png), url(bg2.png), url(bg3.png);
background-position: center top, left top, right top;
background-repeat: no-repeat;
}
/* 示例2：給一個(gè)元素添加“陰影”邊框效果 */
.border-shadow {
position: relative;
}
.border-shadow:before, .border-shadow:after {
content: "";
position: absolute;
z-index: -1;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
transform: rotate(3deg);
}
.border-shadow:before {
top: 12px;
left: 15px;
transform: rotate(-3deg);
}

需要注意的是，在使用圖層的時(shí)候要注意避免過(guò)度重疊或者層數(shù)過(guò)多導(dǎo)致網(wǎng)頁(yè)加載速度變慢的問(wèn)題。另外，對(duì)于一些比較特殊的情況，例如需要給頁(yè)面的某個(gè)區(qū)域添加全屏背景圖片的時(shí)候，則建議使用CSS3的background-size屬性來(lái)實(shí)現(xiàn)，而不是使用圖層。