/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 10px;
height:10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
/* background-color: #0ae; */
background-color: #3c8dbc;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}

效果图:

webkit浏览器下改变滚动条样式的更多相关文章

  1. 清除webkit浏览器css设置滚动条

    主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollb ...

  2. chrome和IE下的滚动条样式修改

    火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...

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

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

  4. CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...

  5. css修改浏览器默认的滚动条样式

    //滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...

  6. input type="file"在各个浏览器下的默认样式,以及修改自定义样式

    一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...

  7. webkit浏览器下多行显示,有省略号效果

    多行显示情况 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ...

  8. 改变浏览器页面默认滚动条样式scrollbar

    scrollbar-3d-light-color 设置或检索滚动条亮边框颜色scrollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色sc ...

  9. webkit浏览器css设置滚动条

    主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scroll ...

随机推荐

  1. spring boot + mybaits 处理枚举类 enum

    枚举: //实现层调用 orderMapper.getOrder(OrderStatus.DISCOUNT); sql打印: 实际sql: select * from order where orde ...

  2. 【原创】go语言学习(七)数组

    目录 数组定义 二维数组 数组拷贝.传参 数组定义 1. 数组是同一类型的元素集合. var a [3]int //定义一个数组 //Go中数组下标从0开始,因此⻓长度为n的数组下标范围:[0,n-1 ...

  3. WallpaperEngine 导入 mp4 文件出现 failed opening video

    WallpaperEngine 导入 mp4 文件出现 failed opening video 如图 下载这个插件 链接:点击打开链接 密码:dkf8

  4. 使用java时报的一些错误

    mysql-connector-java报not found的错误 ftp上传文件失败原因 1.mysql-connector-java报not found的错误 在网上查,很容易查找到java连接数 ...

  5. 20191214数组习题之三:报数(附pow函数简单用法)

  6. 快速打造自己的PHPStorm主题

    ---恢复内容开始--- 一个优雅和舒适的界面,可以增加过多写入代码的动力. Phpstorm小型的白色主题比较简陋.为了打造一个优雅和舒适的界面,我们安装一件叫Material Theme UI的插 ...

  7. java设计模式学习-单例模式

    java中单例模式定义:“一个类有且仅有一个实例,并且自行实例化向整个系统提供.”单例模式可以保证一个应用中有且只有一个实例,避免了资源的浪费和多个实例多次调用导致出错. 单例模式有以下特点: 1.单 ...

  8. 【spark 算子案例】

    package spark_example01; import java.io.File; import java.io.FileWriter; import java.io.IOException; ...

  9. java之map遍历

    java开发中常常会用到遍历,所以下边就列举四种map的遍历方法. public class testMap { public static void main(String[] args) { Ma ...

  10. pl/sql test Window 参数为date

    好久没写笔记了,感觉颓废了,原因是工作忙,休息时间人也变懒了,好了不说了:今天需要记录一下plsql打开测试窗口测试存储过程时,入参为date格式时报的异常 本以为和sql一样处理就可以,但是报异常, ...