NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤
转自: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滚动条皮肤的更多相关文章
- css样式表。作用是美化HTML网页.
样式表分为:(1)内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余多. 如:<p style="font-size:10px">内联样式表</p&g ...
- CSS3滚动条美化,CSS3滚动条皮肤
CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这 ...
- css和js实现硬件加速渲染自定义滚动条
听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- 漂亮的表格样式–>使用CSS样式表控制表格样式
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢.WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择.现在介绍使用CSS样式表来控制.美化表格的方法. ...
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- 笔记:css3伪选择器改变滚动条样式
现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...
- 学习了解CSS3发展方向和CSS样式与优先级
通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on Cod ...
- CSS3学习笔记-1:CSS样式继承
自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...
随机推荐
- springBoot springCloud
微服务功能的主要体现: 1)服务的注册与发现 Eureka ,Consul ,Zookeeper 2)服务的负载均衡 Ribbon 3)服务的容错 Hystrix 4)服务的网关 微服务中常用的网关组 ...
- AC日记——[SCOI2008] 着色方案 bzoj 1079
1079 思路: dp: 我们如果dp方程为15维,每维记录颜色还有多少种: 不仅tle,mle,它还re: 所以,我们压缩一下dp方程: 方程有6维,第i维记录有多少种颜色还剩下i次: 最后还要记录 ...
- MSSQL—列记录合并成一行
在项目开发中,有时会碰到将列记录合并为一行的情况,例如根据地区将人员姓名合并,或根据拼音首字母合并城市等,下面就以根据地区将人员姓名合并为例,详细讲一下合并的方法. 首先,先建一个表,并添加一些数据, ...
- Netty源码学习(六)ChannelPipeline
0. ChannelPipeline简介 ChannelPipeline = Channel + Pipeline,也就是说首先它与Channel绑定,然后它是起到类似于管道的作用:字节流在Chann ...
- [HDU6240]Server
题目大意: 用$n$条线段覆盖区间$[1,t]$上的整点.每条线段有4个属性$(S_i,T_i,A_i,B_i)$,表示用第$i$条线段可以覆盖区间$[S_i,T_i]$.若选取线段的集合为$S$,最 ...
- 八. 输入输出(IO)操作4.面向字节的输入输出流
字节流以字节为传输单位,用来读写8位的数据,除了能够处理纯文本文件之外,还能用来处理二进制文件的数据.InputStream类和OutputStream类是所有字节流的父类. InputStream类 ...
- jQuery滑动方法
jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...
- linux-系统资源查看-动态
1.top 2.sar http://blog.csdn.net/hguisu/article/details/7493661 很重要 http://blog.itpub.net/24435147/ ...
- centos iptables关于ping
配置iptables策略后,一般来说INPUT都是DROP然后配置需要通过的 当执行: iptables -P INPUT DROP 后,机器就不能被ping通了! 因为icmp没有添加到规则中! 于 ...
- Mysql insert without auto-increase when duplicate
INSERT INTO video_tag_all(tagname,ctime) FROM video_tag_all WHERE (SELECT last_insert_id(id) FROM vi ...