转自:http://www.pengyaou.com/codecss3/POKDNMS_112.html

CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条。

下面是5个滚动条样式。

css代码

 .test1::-webkit-scrollbar {
width: 8px;
}
.test1::-webkit-scrollbar-track {
background-color:#808080;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test1::-webkit-scrollbar-thumb {
background-color:#ff4400;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test2::-webkit-scrollbar {
width: 8px;
}
.test2::-webkit-scrollbar-track {
background-color:#fff;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
border:1px solid #ccc;
}
.test2::-webkit-scrollbar-thumb {
background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test3::-webkit-scrollbar {
width: 12px;
}
.test3::-webkit-scrollbar-track {
background-color:#f5f5f5;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test3::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6, #54DE5D));
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test4{
width:500px;
overflow:scroll !important;
width:600px;
}
.test4>div{
width:1000px;
}
.test4::-webkit-scrollbar {
width: 12px;
height:12px;
}
.test4::-webkit-scrollbar-track {
background-color:#f5f5f5;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test4::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #F90;
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test5::-webkit-scrollbar {
width: 12px;
height:12px;
}
.test5::-webkit-scrollbar-track {
background-color:#f5f5f5; }
.test5::-webkit-scrollbar-thumb {
background-color: #d52828;
}

NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤的更多相关文章

  1. css样式表。作用是美化HTML网页.

    样式表分为:(1)内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余多. 如:<p style="font-size:10px">内联样式表</p&g ...

  2. CSS3滚动条美化,CSS3滚动条皮肤

    CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这 ...

  3. css和js实现硬件加速渲染自定义滚动条

    听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...

  4. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  5. 漂亮的表格样式–>使用CSS样式表控制表格样式

    依照WEB2.0风格,设计了几个表格样式,希望大家喜欢.WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择.现在介绍使用CSS样式表来控制.美化表格的方法. ...

  6. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  7. 笔记:css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

  8. 学习了解CSS3发展方向和CSS样式与优先级

    通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on Cod ...

  9. CSS3学习笔记-1:CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

随机推荐

  1. Java错误随手记

    一.Eclipse启动时提示: An internal error occurred during: "Initializing Java Tooling" 1.关闭Eclipse ...

  2. Dom4J读写xml

    解析读取XML public static void main(String[] args) { //1获取SaxReader对象 SAXReader reader=new SAXReader(); ...

  3. 【linux高级程序设计】(第九章)进程间通信-管道 2

    文件描述符重定向 cat<test01  :将输入重定向到test01文件 cat>test02<test01  :将标准正确输出重定向到test02文件,输入设备重定向到test0 ...

  4. AC日记——Little Elephant and Array codeforces 221d

    221D - Little Elephant and Array 思路: 莫队: 代码: #include <cmath> #include <cstdio> #include ...

  5. 获取父窗口iframe方法

    在页面中,有个iframe,基于这个iframe,弹出了个窗口,这个窗口在关闭的时候需要操作iframe里的元素. 做法是 window.top.document.getElementById(&qu ...

  6. Python的程序结构[1] -> 方法/Method[1] -> 静态方法、类方法和属性方法

    静态方法.类方法和属性方法 在 Python 中有三种常用的方法装饰器,可以使普通的类实例方法变成带有特殊功能的方法,分别是静态方法.类方法和属性方法. 静态方法 / Static Method 在 ...

  7. luogu P1332 血色先锋队

    题目描述 巫妖王的天灾军团终于卷土重来,血色十字军组织了一支先锋军前往诺森德大陆对抗天灾军团,以及一切沾有亡灵气息的生物.孤立于联盟和部落的血色先锋军很快就遭到了天灾军团的重重包围,现在他们将主力只好 ...

  8. POJ 2739:Sum of Consecutive Prime Numbers(Two pointers)

    [题目链接] http://poj.org/problem?id=2739 [题目大意] 求出一个数能被拆分为相邻素数相加的种类 [题解] 将素数筛出到一个数组,题目转化为求区段和等于某数的次数,尺取 ...

  9. Shader与AGAL(From 7yue)

  10. List和ArrayList的区别和联系

    1.    List是一个接口,而ArrayList是List接口的一个实现类. ArrayList类继承并实现了List接口. 因此,List接口不能被构造,也就是我们说的不能创建实例对象,但是我们 ...