笔记：css3伪选择器改变滚动条样式

最新推荐文章于 2024-07-31 10:43:01 发布

你狗

最新推荐文章于 2024-07-31 10:43:01 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/murenziwei/p/9328586.html

本文介绍如何使用CSS3的伪元素选择器::-webkit-scrollbar来定制网页中滚动条的样式，包括滚动条的整体外观、轨道及滑块的颜色与阴影等效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在我打开支持前缀-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>