现在我打开支持前缀-webkit-的浏览器，也就是说只要支持前缀为-webkit-的浏览器才有效果

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>css3伪选择器改变滚动条样式</title>

  <style>

     .thumb{

       width:300px;

       height:600px;

       overflow:auto;

     }

     .thumb::-webkit-scrollbar{

        /*滚动条整体*/

        width:10px;

     }

     .thumb::-webkit-scrollbar-track{

        /*滚动条里面的轨道*/

        box-shadow:inset 0 0 5px;

        border-radius:5px;

     }

     .thumb::-webkit-scrollbar-thumb{

        /*滚动条轨道里面的方块*/

        border-radius:5px;

        background-color: gray;

        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

        background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

        background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

     }

  </style>

 </head>

 <body>

    <div class="thumb">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim electus. Repellat quo officia dolores inventore doloremque dolor.</div>

 </body>

</html>

Chrome

笔记：css3伪选择器改变滚动条样式的更多相关文章

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

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

  2. css：改变滚动条样式

    以下亲测谷歌内核的浏览器有用,微软和火狐无效 body::-webkit-scrollbar {/*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1 ...

  3. css改变滚动条样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 12px; background-color: #F5 ...

  4. webkit浏览器下改变滚动条样式

    /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  7. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  8. 认识CSS3新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

  9. 【CSS3】自定义滚动条样式 -webkit-scrollbar

    好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...

随机推荐

  1. rtmp官方标准规范详细解析

    标准规范学习: rtmp消息结构,包括几个部分: 时戳:4  byte,单位毫秒.超过最大值后会翻转. 长度:消息负载的长度. 类型ID:Type Id 一部分ID范围用于rtmp的控制信令.还有一部 ...

  2. Day6 ,周期末考试试题

    Python基础数据类型考试题 考试时间:两个半小时                      满分100分(80分以上包含80分及格) 一,基础题. 1,简述变量命名规范(3分) 2,字节和位的关系 ...

  3. 「BZOJ1095」[ZJOI2007] Hide 捉迷藏

    题目描述 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双向走廊组成,这N-1条 ...

  4. python http post json

    直接上代码吧 #coding=utf-8 import os import urllib import urllib2 import re import cookielib import json h ...

  5. node.js async 几个函数

    async.waterfallasync.seriesasync.parallelasync.auto http://my.oschina.net/huangsz/blog/176203http:// ...

  6. Educational Codeforces Round 34 (Rated for Div. 2) D - Almost Difference(高精度)

    D. Almost Difference Let's denote a function You are given an array a consisting of n integers. You ...

  7. Codeforces Round #427 (Div. 2) B. The number on the board

    引子: A题过于简单导致不敢提交,拖拖拉拉10多分钟还是决定交,太冲动交错了CE一发,我就知道又要错过一次涨分的机会.... B题还是过了,根据题意目测数组大小开1e5,居然蒙对,感觉用vector更 ...

  8. （samba启动失败）smb.service: main process exited, code=exited, status=1/FAILURE

    按照指示,前往:journalctl -xe 没什么发现,搜的时候有人说也可以查看 journalctl -r 打出来之后我也看不出什么门道来 又看到有人说 smb 方面可以看看 testparm 我 ...

  9. jvm内存结构(一)(结构总览)

    jvm内存结构:<Java虚拟机原理图解>3.JVM运行时数据区 程序计数器: ,是执行的字节码的行号指示器,记录的是正在执行的虚拟机字节码指令的地址. ,每个线程都有独立计数器,互不干扰 ...

  10. ReentrantLock总体概括

    一.锁的实现原理: JAVA concurrent包下面的锁是通过AbstractQueuedSynchronizer内的Node类下面的state属性来实现的,并且锁的可重入属性也是通过state实 ...