CSS彩色滚动条分享

最新推荐文章于 2023-07-27 17:16:49 发布

壹影

最新推荐文章于 2023-07-27 17:16:49 发布

阅读量180

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_35694359/article/details/129701710

版权

CSS彩色滚动条分享

今天在逛博客的时候无意间发现，有的博客的滚动条是自定义的非常好看，查看源码发现其实就一段CSS的样式，分享出来供大家学习…

样式图

为了方便查看，这个效果图的宽度有所增加… 在这里插入图片描述

::-webkit-scrollbar {
width: 10px;  
height: 0px;
}

::-webkit-scrollbar-thumb {
 background-color: #12b7f5;
 background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);}
 
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}