網頁拖動條可以幫助網頁在內容超出頁面大小的情況下，使用戶可以方便地查看頁面內容。下面介紹使用 CSS 實現網頁拖動條的方法。

/* 水平拖動條 */
.scrollbar-horizontal {
height: 12px;
background-color: #f5f5f5;
border-radius: 10px;
}
.scrollbar-horizontal-thumb {
width: 50px;
background-color: #c2c2c2;
border-radius: 10px;
}
/* 垂直拖動條 */
.scrollbar-vertical {
width: 12px;
background-color: #f5f5f5;
border-radius: 10px;
}
.scrollbar-vertical-thumb {
height: 50px;
background-color: #c2c2c2;
border-radius: 10px;
}
/* 拖動條滾動條樣式 */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #c2c2c2;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
border-radius: 10px;
}

以上代碼中，我們先定義了水平和垂直方向的拖動條樣式，然后使用 CSS 偽元素來定義拖動條滾動條的樣式。其中，::-webkit-scrollbar定義滾動條的大小，::-webkit-scrollbar-thumb定義滾動條的顏色和圓角，::-webkit-scrollbar-track定義滾動條背景色和圓角。

以上是簡單的 CSS 實現網頁拖動條的方法，可以根據需求自行修改樣式。