滚动条样式

最新推荐文章于 2023-01-09 17:01:00 发布

XUYANBOYA

最新推荐文章于 2023-01-09 17:01:00 发布

阅读量52

点赞数

本文链接：https://blog.csdn.net/XUYANBOYA/article/details/118364148

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .test {
           height : 200px;
           overflow: auto;
           float : left;
           margin : 10px 20px;
           border : none;
           }
           .scrollbar {
           width : 30px;
           height: 300px;
           margin: 0 auto;
           }

           .test-1::-webkit-scrollbar {
           width : 10px;
           height: 1px;
           box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
           border-radius: 10px;
           background : #ededed;
           }
           .test-1::-webkit-scrollbar-thumb {
           border-radius: 10px;
           box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
           background : #4e6ef2;
           }


           .test-2::-webkit-scrollbar {
           width : 10px;
           height: 1px;
           background-image: -webkit-linear-gradient(bottom,rgb(122, 153, 217) 44%, rgb(73, 125, 189) 60%, rgb(28, 58, 148));
           border-radius: 10px;
           }
           .test-2::-webkit-scrollbar-thumb {
           border-radius: 10px;
           box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
           background : #F5F5F5;
           }


           .test-3::-webkit-scrollbar {
           width : 10px;
           height: 1px;
           box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
           background: #F5F5F5;
           border-radius: 10px;
           }
           .test-3::-webkit-scrollbar-thumb {
           border-radius: 10px;
           background-image: -webkit-linear-gradient(bottom,rgb(122, 153, 217) 44%, rgb(73, 125, 189) 60%, rgb(28, 58, 148));
           }

           .test-5::-webkit-scrollbar {
           width : 10px;
           height: 1px;
               box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
               background : #ededed;
               border-radius: 10px;
           }
           .test-5::-webkit-scrollbar-thumb {
           border-radius : 10px;
           background-color: skyblue;
           background-image: -webkit-linear-gradient(45deg,
           rgba(255, 255, 255, 0.2) 25%,
           transparent 25%,
           transparent 50%,
           rgba(255, 255, 255, 0.2) 50%,
           rgba(255, 255, 255, 0.2) 75%,
           transparent 75%,
           transparent
           );
           }
       </style>
   </head>
   <body>
       <div class="test test-1">
       <div class="scrollbar"></div>
       </div>

       <div class="test test-2">
       <div class="scrollbar"></div>
       </div>

       <div class="test test-3">
       <div class="scrollbar"></div>
       </div>


       <div class="test test-5">
       <div class="scrollbar"></div>
       </div>
   </body>
</html>