利用css简单美化网站右侧滚动条

董舒文 2020-08-20 PM 497℃ 57条

美化网站右侧滚动条,纯CSS样式,非常简单,复制粘贴CSS代码即可使用~
代码如下:

/* 滚动条的宽度 */
::-webkit-scrollbar {
  width: 13px;
}
/* 滚动条的背景颜色 */
::-webkit-scrollbar-track {
  background-color: #f2f2f2;
}
/* 滑块部分颜色 */
::-webkit-scrollbar-thumb {
  background-color: #ff7e80;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}
/* 纵横滚动条交错点颜色 */
::-webkit-scrollbar-corner {
  background-color: black;
}
标签: Css

非特殊说明,本博所有文章均为博主原创,部分搬运。

评论已关闭