自定义谷歌滚动条样式
2016-12-20 19:30
274 查看
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar/*整体部分*/
{
width: 6px;
height:10px;
}
::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
/* background: rgba(0,0,0,0.1); */
background:#eee;
}
::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.2);
background:#ccc;
}
::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.2);
background:#ccc;
}
::-webkit-scrollbar/*整体部分*/
{
width: 6px;
height:10px;
}
::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
/* background: rgba(0,0,0,0.1); */
background:#eee;
}
::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.2);
background:#ccc;
}
::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.2);
background:#ccc;
}
相关文章推荐
- ionic通过判定设备来加载对应的css样式
- css动画兼容
- CSS(3)-动画
- css
- css表示屏幕宽度和高度
- CSS之transition
- 《css揭秘》-学习笔记1
- 【Qt学习笔记】14.界面的样式 (Qt Stylesheet)
- 直接在 CSS 中引用 FONTAWESOME 图标(附码表)
- CSS学习之二实践盒子
- css参考手册内容比较齐全
- div+CSS实现三角形
- 【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应
- pointer-events: none——CSS实现禁用鼠标点击事件!巧妙解决ExtJs表格单行禁用功能!
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
- Activity 全屏Dialog样式
- css3实现圆形逐渐减少动画
- 继续修复css3动画一处小bug
- CSS3之元素阴影box-shadow
- nth-child(odd)和nth-child(even)