在Web開發中，可滑動的框是一個十分常見的UI組件。這種組件可以方便用戶在移動設備上觀看各種內容，比如圖片、文本以及視頻等等。那么如何使用CSS來實現一個可滑動的框呢？接下來我們將介紹一下。

/* 設置框的基本樣式 */
.box {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
/* 滾動條樣式 */
::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
/* 添加內容 */
.content {
display: inline-block;
margin: 5px;
width: 200px;
height: 200px;
background-color: #ddd;
}
/* 為第一個和最后一個添加圓角 */
.content:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.content:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

首先我們定義了一個基本的框樣式，設置寬度、設置超出部分可滾動、設置空白不換行等等。然后我們使用了-webkit-overflow-scrolling屬性來優化移動端的滾動效果。

接著我們設置了滾動條樣式，包括滾動條寬度、高度、背景顏色，以及滾動條的拖動滑塊顏色。

最后我們添加了一些內容，并為第一個和最后一個添加了圓角樣式，使得滾動框的兩端更美觀。

到此為止，我們的可滑動框就完成了。可以看到，使用CSS輕松實現了一個漂亮的可滑動的框。