CSS可以使我們的網頁更加美觀、易于閱讀。其中，兩個圖片交叉的效果是非常獨特的一種效果。

.cross-image {
position: relative;
}
.cross-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.cross-image img:nth-child(1) {
z-index: 2;
transform: rotate(10deg);
}
.cross-image img:nth-child(2) {
z-index: 1;
transform: rotate(-10deg);
}

讓我們來看看上面這段代碼。首先，我們定義了一個父元素，類名為"cross-image"，它的位置屬性必須是相對的，這樣它內部的絕對定位的圖片才會相對于它來定位。

接著，我們為內部的兩個圖片設置了絕對位置，并且用"transform"屬性來旋轉它們。重點是，其中一個圖片的z-index為2，另一個圖片的z-index為1。這樣，第一個圖片就會展現在第二個圖片的上面，從而實現兩個圖片交叉的效果。

好了，通過這個效果的實現，說明了CSS在布局方面的強大，同時也啟示我們要多動動腦筋、想出更多有趣的布局方式。