转自: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. ajax和json数据

    一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待     卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应, ...

  2. 在16aspx.com上下了一个简单商品房销售系统源码,怎么修改它的默认登录名和密码

    你可以打开那个连接数据库的网页,一般都是conn.aspx,里边有数据库的登录名称和密码

  3. POJ 3041.Asteroids-Hungary(匈牙利算法)

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23963   Accepted: 12989 Descr ...

  4. Apache CXF实战之四 构建RESTful Web Service

    Apache CXF实战之一 Hello World Web Service Apache CXF实战之二 集成Sping与Web容器 Apache CXF实战之三 传输Java对象 这篇文章介绍一下 ...

  5. SQL语句原理与高效SQL语句(转)

    做软件开发的programers,大部分都离不开跟数据库打交道,特别是erp开发的,跟数据库打交道更是频繁,存储过程动不动就是上千行,如果数据量大,人员流动大,那么还能保证下一段时间系统还能流畅的运行 ...

  6. linux-网络监控命令-netstat进阶

    2.网络连接状态详解共有12中可能的状态,前面11种是按照TCP连接建立的三次握手和TCP连接断开的四次挥手过程来描述的.1).LISTEN:首先服务端需要打开一个socket进行监听,状态为LIST ...

  7. Microsoft SQL Server Version List [sqlserver 7.0-------sql server 2016]

    http://sqlserverbuilds.blogspot.jp/   What version of SQL Server do I have? This unofficial build ch ...

  8. 一篇文章让你彻底弄懂WinForm GDI 编程基本原理

    一 GDI编程原理 GDI(Graphics Device Interface,图形设备接口),主要负责Windows系统与绘图程序之间的信息交换,处理所有Windows程序的图形输出. GDI的常用 ...

  9. Proxy server got bad address from remote server

    在ArcMap中,在GIS Servrvers中,打开已经设置好的服务器时,出现下面的弹窗问题. Proxy server got bad address from remote server(ver ...

  10. ios 字体类型设置 倾斜加粗等

    后面加-Bold就是加粗 加-Oblique就是倾斜等 还有不懂请看http://iosfonts.com/ iPhone 5.0 iPad 5.0 Font Families: 58 Font Fa ...