最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css3如何实现滚动条美化效果 css3实现滚动条美化效果代码实例
时间:2022-06-25 13:58:58 编辑:袖梨 来源:一聚教程网
css3如何实现滚动条美化效果?本篇文章小编给大家分享一下css3实现滚动条美化效果代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
代码如下所示:
/*滚动条的宽度*/ ::-webkit-scrollbar { } /*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果*/ ::-webkit-scrollbar-track { background-color:#0d1b20; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } /*滚动条的设置*/ ::-webkit-scrollbar-thumb { background-color:#606d71; background-clip:padding-box; min- -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } /*滚动条移上去的背景*/ ::-webkit-scrollbar-thumb:hover { background-color:#fff; }
CSS
::-webkit-scrollbar { } ::-webkit-scrollbar-button { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-track-piece { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-corner { } ::-webkit-resizer { }
以上CSS代码所管辖的区域对就关系:以上代码解释
::-webkit-scrollbar 滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
相关文章
- 《弓箭传说2》新手玩法介绍 01-16
- 《地下城与勇士:起源》断桥烟雨多买多送活动内容一览 01-16
- 《差不多高手》醉拳龙技能特点分享 01-16
- 《鬼谷八荒》毕方尾羽解除限制道具推荐 01-16
- 《地下城与勇士:起源》阿拉德首次迎新春活动内容一览 01-16
- 《差不多高手》情圣技能特点分享 01-16