css 好看的滚动条

CSS样式表可以让我们的网页更加好看，而好看的滚动条也是其中之一。下面我们就来介绍一些好用的CSS样式，让你的滚动条变得更加美观。

首先，我们需要给滚动条定义样式：

::-webkit-scrollbar {
    /* WebKit浏览器 */    width: 10px;
        height: 10px;
        background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
        background-color: #666;
}

这样我们就定义了一个简单的滚动条，宽度为10px，高度为10px，滚动条背景颜色为#F5F5F5，滚动条块的颜色为#666。

接下来我们可以对滚动条的其他属性进行调整。

/* 滚动条块的圆角 */::-webkit-scrollbar-thumb {
        border-radius: 4px;
}
/* 滚动条背景和块的透明度 */::-webkit-scrollbar {
        background-color: rgba(245,245,245,0.8);
}
::-webkit-scrollbar-thumb {
        background-color: rgba(102,102,102,0.8);
}
/* 滚动条文本小部件颜色改变 */::-webkit-scrollbar-button {
        background-color: rgba(102,102,102,0.5);
}
/* 滚动条轨道 */::-webkit-scrollbar-track {
        background-color: rgba(245,245,245,0.5);
}
/* 禁止显示滚动条 */::-webkit-scrollbar {
         display: none;
 }
    

现在，我们的滚动条看起来更加美观了。但是，这些样式只适用于Webkit浏览器，如果你的网站需要在其他浏览器中显示良好，需要添加其他的CSS样式。

总之，CSS样式表中存在很多优美的滚动条样式，只要你愿意尝试，不断学习，一定能够打造一款美观的滚动条~

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！