今天我們來聊聊CSS圖片如何設置滾動。 在網頁中，我們經常需要用到滾動的圖片來展示我們的產品或者圖片集。那么該如何設置呢？ 首先，我們需要在HTML中設置一個容器，來承載這些圖片。我們可以使用div標簽來創建這個容器，并給它一個固定的寬度和高度：

<div class="scroll-container">
<p>這里放滾動的圖片</p>
</div>

接下來，我們需要給容器設置一個樣式，將它的overflow屬性設為scroll，這樣就可以讓它的內容滾動了。

.scroll-container {
width: 400px;
height: 200px;
overflow: scroll;
}

現在我們已經完成了容器的設置，接下來就是把圖片放進容器中了。我們可以先把圖片放在一個無序列表中：

<div class="scroll-container">
<ul class="img-list">
<li><img src="image1.jpg" alt="圖片1"></li>
<li><img src="image2.jpg" alt="圖片2"></li>
<li><img src="image3.jpg" alt="圖片3"></li>
<li><img src="image4.jpg" alt="圖片4"></li>
<li><img src="image5.jpg" alt="圖片5"></li>
</ul>
</div>

然后，我們再為圖片設置一些基本的樣式：

.img-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.img-list li {
margin-right: 10px;
}
.img-list img {
width: 200px;
height: 180px;
}

這樣我們的滾動圖片就完成了！可以看到，當我們的圖片超出容器的范圍時，就會出現滾動條，我們可以用鼠標拖動滾動條來查看所有的圖片。 總結一下，要實現滾動的圖片，我們需要： 1. 設置一個容器，將其overflow屬性設為scroll。 2. 將圖片放在一個無序列表中，并為其設置一些基本的樣式。 3. 將無序列表設為flex布局，使圖片橫向排列。 4. 當容器的寬度不夠容納所有圖片時，就會出現滾動條。