浏览器自带的滚动条看上去或许有那么的丑,不过好在这玩意也能美化,直接换上一个彩色条纹的滚动条不是又上升了一个级别?
代码如下:
/**彩色滚动条样式*/
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-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;
}
演示如下:
![图片[1]-彩色滚动条css美化代码 - 日出资源网-日出资源网](https://www.rnmcnm.com/wp-content/uploads/2023/03/a1910e2de5135323.png)
使用教程:将代码放置css代码中即可
![图片[2]-彩色滚动条css美化代码 - 日出资源网-日出资源网](https://www.rnmcnm.com/wp-content/uploads/2023/03/13ae1323a5135447.png)
© 版权声明
文章版权归作者所有,未经允许请勿转载。部分内容可能来自网络,如侵权请联系修改~
THE END
暂无评论内容