CSS3滚动条美化,CSS3滚动条皮肤

最新推荐文章于 2025-06-21 14:13:50 发布

qq_30325409

最新推荐文章于 2025-06-21 14:13:50 发布

阅读量639

点赞数

分类专栏： css

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用-webkit-scrollbar属性来定制网页中滚动条的样式，包括背景颜色、边框半径等，提供了5种不同的滚动条皮肤样式示例。

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

SS3 -webkit-scrollbar滚动条皮肤美化实现，利用-webkit-scrollbar，-webkit-scrollbar-track，-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条。

下面是5个滚动条样式。

css代码

.test1::-webkit-scrollbar {

 width: 8px;

}

 .test1::-webkit-scrollbar-track {

 background-color:#808080;

 -webkit-border-radius: 2em;

 -moz-border-radius: 2em;

 border-radius:2em;

}

 .test1::-webkit-scrollbar-thumb {

 background-color:#ff4400;

 -webkit-border-radius: 2em;

 -moz-border-radius: 2em;

 border-radius:2em;

}

.test2::-webkit-scrollbar {

 width: 8px;

}

 .test2::-webkit-scrollbar-track {

 background-color:#fff;

 -webkit-border-radius: 2em;

 -moz-border-radius: 2em;

 border-radius:2em;

 border:1px solid #ccc;

}

 .test2::-webkit-scrollbar-thumb {

 background-color: #F90;

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

 -webkit-border-radius: 2em;

 -moz-border-radius: 2em;

 border-radius:2em;

}

.test3::-webkit-scrollbar {

 width: 12px;

}

 .test3::-webkit-scrollbar-track {

 background-color:#f5f5f5;

 -webkit-border-radius: 2em;

 -moz-border-radius: 2em;

 border-radius:2em;

}

 .test3::-webkit-scrollbar-thumb {

 border-radius: 10px;

 background-color: #FFF;

 background-image: -webkit-gradient(linear,  40% 0%,  75% 84%,  from(#4D9C41),  to(#19911D),  color-stop(.6, #54DE5D));

 -webkit-border-radius: 2em;

 -moz-border-radius: 2em;

 border-radius:2em;

}

.test4{

    width:500px;

    overflow:scroll !important;

    width:600px;

}

.test4>div{

    width:1000px;

}

.test4::-webkit-scrollbar {

 width: 12px;

 height:12px;

}

 .test4::-webkit-scrollbar-track {

 background-color:#f5f5f5;

 -webkit-border-radius: 2em;

 -moz-border-radius: 2em;

 border-radius:2em;

}

 .test4::-webkit-scrollbar-thumb {

 border-radius: 10px;

 background-color: #F90;

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

 -webkit-border-radius: 2em;

 -moz-border-radius: 2em;

 border-radius:2em;

}

.test5::-webkit-scrollbar {

 width: 12px;

 height:12px;

}

 .test5::-webkit-scrollbar-track {

 background-color:#f5f5f5;

}

 .test5::-webkit-scrollbar-thumb {

 background-color: #d52828;

}

彭亚欧个人博客原创文章,转载请注明出处