我们平时在切片的过程中，某些DIV里面如果想局部加滚动条的话都会非常丑陋。
无耐的时候我们通常都会使用Jquery插件来实现。并且很多时候还面临着兼容问题，总之没有直接使用overflow:scroll用户体验好。
今天给大家推荐一种非常好用的纯CSS的滚动条样式，只需要将下面这段代码加入到你的CSS文件中，就可以随意的在不同的位置使用overflow:scroll了。
显示的效果也非常不错。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #ccc;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #c8c8c8;
}并且还可以通过CSS直接定义颜色哟。
以上是纯CSS样式之非常好用的滚动条样式的详细内容。更多信息请关注PHP中文网其他相关文章！
