纯CSS改变webkit内核浏览器的滚动条样式


Posted in HTML / CSS onApril 17, 2014

基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下:

复制代码
代码如下:

::-webkit-scrollbar/*整体部分*/
{
width: 10px;
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);
}

::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}

效果:
纯CSS改变webkit内核浏览器的滚动条样式

HTML / CSS 相关文章推荐
CSS3盒子模型详解
Apr 24 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
You might like
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP中ADODB类详解
2008/03/25 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Django REST framework视图的用法
2019/01/16 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python中remove函数的踩坑记录
2021/01/04 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
如何用SQL语句进行模糊查找
2015/09/25 面试题
关于爱情的广播稿
2014/01/16 职场文书
文明倡议书范文
2014/04/15 职场文书
机关作风建设工作总结
2014/10/23 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js