隨著Web頁面的日益豐富，圖片展示逐漸成為網站設計中必不可少的一部分。而圖像輪播或者圖片走馬燈效果就是其中最受歡迎的一種設計，可以利用CSS和JavaScript創建。下面我們來介紹如何使用CSS實現圖片走馬燈效果。

/*CSS代碼*/
.container {
width: 90%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
width: 100%;
height: 300px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
.slides::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 10px;
}
.slide {
scroll-snap-align: start;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.slide:nth-of-type(1) {
background-image: url("img1.jpg");
}
.slide:nth-of-type(2) {
background-image: url("img2.jpg");
}
.slide:nth-of-type(3) {
background-image: url("img3.jpg");
}
.slide:nth-of-type(4) {
background-image: url("img4.jpg");
}
.slide:nth-of-type(5) {
background-image: url("img5.jpg");
}

在CSS中，我們先定義一個外層容器，用于容納圖片輪播框架。因為輪播主體數量較多，我們使用flex來創建一行的輪播框架。另外，因為輪播主體數量比較多，需要使用scroll-snap來實現彈性滾動。

接下來，在每個輪播主體上，使用nth-of-type來選擇需要展示的圖片，設置其寬度和背景顏色等相關元素。因為我們使用scroll-snap來實現滑動效果，所以需要將每個輪播主體的寬度設置為100%。

最后，我們就可以在HTML文件中插入容器并進行一個小優化，讓它完美地跑起來了。需要注意的是，由于CSS使用了某些比較新的屬性，不同瀏覽器的兼容性存在一定的差別。