怎么在CSS中設置div滾動條

這期內容當中小編將會給大家帶來有關怎么在CSS中設置div滾動條，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

代碼如下:

.scroll{
width:100px;
height:200px;
overflow:auto; /*自動出現滾動條，如果要出現豎直滾動條則改成：overflow-y:auto，如果橫向出現滾動條則改成：overflow-x:auto*/
scrollbar-face-color:#F00; /*滾動條凸出部分的顏色(前景色),包括兩端的方形按鈕、水平或豎直滑動的滑塊的顏色*/
scrollbar-track-color:#FFF; /*滾動條的背景顏色,如果省略的話將出現虛點，顏色將采用face-color的顏色*/
scrollbar-arrow-color:#FFF;<span > </span><span >/*按鈕(上下或者左右可以點擊使滑塊滾動的方形按鈕)上三角箭頭的顏色*/</span>
scrollbar-3dlight-color:#0F0; /*滾動條亮邊的顏色,形成3D效果，有層次感，肉眼觀察在滾動條左邊及上邊出現一條有色線（豎直方向滾動）*/
scrollbar-darkshadow-color:#00F; /*滾動條強陰影的顏色,肉眼觀察出現滾動條下邊及右邊*/
scrollbar-highlight-color:#F0F; /*滾動條空白部分的顏色,肉眼觀察改變不明顯，具體顏色改變出現在左邊和上邊空白處，介于face-color效果與3dlingt-color效果之間有個空白顏色（默認為白色）。此外，滾動條前景色有種凹陷的感覺，周邊線條顏色凸起*/
scrollbar-shadow-color:#006600; /*立體滾動條陰影的顏色，具體出現在滑塊及方形按鈕的右邊及下邊，形成陰影效果，顏色介于face-color效果和darkshadow-color效果之間，不是很明顯*/
scrollbar-base-color:#0f0; /*滾動條的基本顏色,當前面7個效果出現時，滾動條基本顏色設置肉眼很難觀察到，如果不設置前面7個效果,系統將根據base-color自動設置，其中前景色，背景色(虛點表示)顏色一致，其他效果(陰影以黑色填充),沒有什么要求時，建議不設置此效果*/

代碼如下:

/*
scrollbar-face-color:#F00;
scrollbar-track-color:#FFF;
scrollbar-arrow-color:#FFF;
這3個效果建議必須設置
*/
}
.font{ color:#006600}

代碼如下:

<div class="scroll">
<p>魔天記無彈窗</p>
<p>筆趣閣</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
<p>文字內容</p>
</div>

上述就是小編為大家分享的怎么在CSS中設置div滾動條了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。