1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > CSS 滚动条样式美化

CSS 滚动条样式美化

时间:2021-03-03 08:24:00

相关推荐

CSS 滚动条样式美化

滚动条主要属性

::-webkit-scrollbar:滚动条整体部分::-webkit-scrollbar-thumb:滚动条里面的滑块::-webkit-scrollbar-track: 滚动条的轨道::-webkit-scrollbar-button: 滚动条轨道两端的按钮,允许通过点击微调滑块的位置::-webkit-scrollbar-track-piece:内层轨道,滚动条中间部分::-webkit-scrollbar-corner:边角,及两个滚动条的交汇处::-webkit-resizer:两个滚动条的交汇处上用于通过拖动调整元素大小的小控

示例

<style>/* 设置滚动条的样式 */::-webkit-scrollbar {width:12px; /* 竖向滚动条宽度 */height: 13px; /* 横向滚动条宽度 */background-color: #000;}/* 滚动槽 */::-webkit-scrollbar-track {/* 其实直接在 ::-webkit-scrollbar 中设置也能达到同样的视觉效果*//* -webkit-box-shadow: inset 0 0 6px rgba(177, 223, 117, 0.7); */background-color: #fff;border-radius: 10px;}::-webkit-scrollbar-button {/* 设置了相关样式,按钮才会出来 */background-color: #6868f3;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(8, 182, 110, 0.616);}::-webkit-scrollbar-thumb:hover {background: rgba(5, 156, 93, 0.719);-webkit-box-shadow: unset;}::-webkit-scrollbar-thumb:window-inactive {/* 容器不被激活时的样式 */background: #ff000066;}::-webkit-scrollbar-corner {/* 两个滚动条交汇处边角的样式 */background-color: #f34e12;}</style>

效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。