CSS3自定义滚动条样式
生活随笔
收集整理的這篇文章主要介紹了
CSS3自定义滚动条样式
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖:
HTML:
<div class="box"><div class="transcrided_text"></div> </div>CSS:
.transcrided_text {margin: 0 0.5rem;font-size: 0.14rem;padding-bottom: 0.2rem;height: 1.62rem;overflow-y: scroll; }/*主要部分 -- 自定義樣式*/ /*滾動(dòng)條整體樣式*/ .transcrided_text::-webkit-scrollbar {width: 6px;height: 1px; } /*滾動(dòng)條滑塊*/ .transcrided_text::-webkit-scrollbar-thumb {border-radius: 6px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #BEBEBE; } /*滾動(dòng)條軌道*/ .transcrided_text::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);border-radius: 6px;background: #EDEDED; }兼容性:
chrome可以顯示;火狐、ie會(huì)變成默認(rèn)樣式。360用的chrome的內(nèi)核,360也可以使用。
總結(jié)
以上是生活随笔為你收集整理的CSS3自定义滚动条样式的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: r11怎么连接优盘 r11如何连接USB
- 下一篇: css清除浮动的几种方法_CSS--清除