纯CSS修改网站的滚动条样式

  • 内容
  • 评论
  • 相关

目录

纯CSS修改网站的滚动条样式,其实很简单的,将以下代码加到style.css中即可,该效果只能在主流浏览器中展示出来。

CSS代码:

/**
* 滚动条样式
* */
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

::-webkit-scrollbar
{
width: 8px;/*右侧竖直滚动条宽度*/
height:8px;/*水平滚动条高度*/
background-color: #F5F5F5;
}

/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb
{
background-color: #F90;
-webkit-border-radius:7px; /*默认状态下的滚动条圆角*/
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent);
}

/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece{
background-color:#f5f5d5; /*滚动框背景颜色*/
}

本文链接: https://www.beiqian.site/141.html.转载请注明.

如果觉得本站对您有帮助的话,不妨推荐给您的基♂友哦~订阅一下叭!!!!!

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注