CSS4圖片疊加正方形是一種非常炫酷的設計效果，可以讓網頁看起來更加精致。本文將會教你如何使用CSS實現這種效果。
首先，我們需要設置四個含有不同背景顏色的正方形。代碼如下：
.square {
width: 200px;
height: 200px;
position: relative;
}
.square:nth-child(1) {
background-color: pink;
}
.square:nth-child(2) {
background-color: lightblue;
}
.square:nth-child(3) {
background-color: lightgreen;
}
.square:nth-child(4) {
background-color: yellow;
}
接下來，我們需要把這四個正方形疊加在一起。為此，我們可以使用CSS的z-index屬性，并將其設置為正方形之間的間隔大小。代碼如下：
.square:nth-child(1) {
z-index: 4;
}
.square:nth-child(2) {
z-index: 3;
top: 20px;
left: 20px;
}
.square:nth-child(3) {
z-index: 2;
top: 40px;
left: 40px;
}
.square:nth-child(4) {
z-index: 1;
top: 60px;
left: 60px;
}
最后，我們可以將整個效果放到一個容器中，并設置該容器的背景顏色以及相應的邊框。代碼如下：
.container {
width: 280px;
height: 280px;
background-color: #fafafa;
border: 10px solid #ddd;
position: relative;
}
.square {
width: 200px;
height: 200px;
position: absolute;
}
.square:nth-child(1) {
background-color: pink;
z-index: 4;
}
.square:nth-child(2) {
background-color: lightblue;
z-index: 3;
top: 20px;
left: 20px;
}
.square:nth-child(3) {
background-color: lightgreen;
z-index: 2;
top: 40px;
left: 40px;
}
.square:nth-child(4) {
background-color: yellow;
z-index: 1;
top: 60px;
left: 60px;
}
通過以上的CSS代碼設置，我們就可以實現四個圖片疊加正方形的效果了。