CSS設定div捲軸樣式的樣本

在我們日常開發工作中，很多頁面都需要捲軸的功能，他更便捷的使使用者對網站頁面的體驗，那麼在DIV中捲軸的樣式有很多種，那麼我們今天就給大家介紹下CSS設定div捲軸樣式的樣本！

div捲軸樣式的樣本

<style type="text/css">.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;/*按鈕(上下或者左右可以點擊使滑塊滾動的方形按鈕)上三角箭頭的顏色*/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}</style><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捲軸樣式、希望對你的工作有所協助！

相關推薦：

CSS中關於捲軸樣式設定的代碼執行個體（圖）

CSS如何設定相容IE捲軸樣式的代碼圖文

html中關於div捲軸樣式設計的執行個體