转自: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. Codeforces 946G Almost Increasing Array (树状数组优化DP)

    题目链接   Educational Codeforces Round 39 Problem G 题意  给定一个序列,求把他变成Almost Increasing Array需要改变的最小元素个数. ...

  2. Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度

    Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度 开发者除了可以为ProgressBar定义的Progress属性直接赋双精度类型的值外,还可以通过数据绑定的方式为该属性 ...

  3. 【bzoj1485:】【 [HNOI2009]有趣的数列】模任意数的卡特兰数

    (上不了p站我要死了,侵权度娘背锅) Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇 ...

  4. NOI2014 部分题解

    感觉NOI2014的一些题目也是比较好做的... 但是笔者往往有思路却没有想清楚就开始搞了...这样还是不太好.. Day1 T1 起床困难综合征  (我感觉这题应该叫综合征不是综合症...)   a ...

  5. MySQL 中的 base64 函数

    1. 5.6版本及之后的版本的base64 主要就是两个mysql内部函数to_base64和from_base64,使用也很简单,如下: 5.6之前不支持 mysql> select vers ...

  6. java File和Byte[]数组 相互转换

    public class Test { public static void main(String[] args){ String filePath = "E:\\softoon\\wor ...

  7. java.util.List.subList ,开区间和闭区间

    比如集合中的内容为1,2,3,4,5list.sublist(2,4)就返回一个子集合:它的内容包括从下标为2到下标为4,而且这是左闭右开的就是说是从大于等于2到小于4那子集内容就是3,4(集合的下标 ...

  8. LRC CRC 纵向冗余码校验

    LRC CRC 纵向冗余码校验   2010-01-26 11:00:15|  分类: 电气 |  标签: |字号大中小 订阅  1.LRC校验  LRC域是一个包含一个8位二进制值的字节.LRC值由 ...

  9. Visual Studio 行末回车时运算符两侧自动加空格是怎么设置的

    在工具—>选项->文本编辑器->c#->格式设置->间距后有三个选项 如果已经选中"二元运算符前后插入空格" 而VS又抽风没有这个功能时,可以选中其余 ...

  10. 【Linux】CentOS7 上使用yum安装和卸载软件【yum安装wine举例】

    关于yum的相关解释,请 man yum 自行查看. 配置常用源:http://www.cnblogs.com/sxdcgaq8080/p/7516186.html yum的使用类似于在windows ...