話不多說直接上**:
/*滾動條樣式*/
::-webkit-scrollbar {
/*滾動條整體樣式*/
width: 4px; /*高寬分別對應橫豎滾動條的尺寸*/
height: 4px;
::-webkit-scrollbar-thumb {
/*滾動條裡面小方塊*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
::-webkit-scrollbar-track {
/*滾動條裡面軌道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
原生的滾動條
更改後的樣式,個人感覺效果沒有那麼好,但相比原生的滾動條,看起來還是舒服一點的
主要是改變原生滾動條的樣式,
一方面是給大家提供分享,另一方面也給自己留乙個備份
CSS3自定義瀏覽器滾動條樣式
乙個完整滾動條右以下部分組成 webkit scrollbar 滾動條整體部分，常用屬性 width,height,background,border webkit scrollbar button 滾動條兩邊的按鈕，預設不設定時不顯示，可設定高度 背景色 背景 webkit scrollbar t...
CSS3自定義滾動條樣式
主要部分 自定義樣式 滾動條整體樣式 transcrided text webkit scrollbar 滾動條滑塊 transcrided text webkit scrollbar thumb 滾動條軌道 transcrided text webkit scrollbar track chrom...
CSS3自定義滾動條樣式
寫在前面 滾動條是個很常見的東東，不過某些瀏覽器自帶的滾動條確實不太好看啊，下面可以作為學習，下自定義滾動條的實現，這樣你的滾動條就可以美美的啦。但是，也只能玩玩，因為只針對webkit核心的瀏覽器啊啊啊啊啊！overflow介紹 定義 overflow 屬性指定當它溢位其塊級容器時,是否剪輯內容，...