改变网页右侧滚动条的样式

为了配合主题的颜色,我把滚动条也换成了#1abc9c原谅绿

新建css文件,命名为user.css

@charset "utf-8";

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 10px;  /*滚动条宽度*/
    height: 10px  /*滚动条高度*/
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    /*滚动条的背景区域的内阴影*/
    box-shadow:0px 1px 3px rgba(0,0,0,0.3) inset;
    /*滚动条的背景区域的圆角*/
    border-radius: 10px;  
    /*滚动条的背景颜色*/
    background-color: #ddd;
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    /*滚动条的内阴影*/
    box-shadow:0px 1px 3px rgba(0,0,0,0.3) inset;
    /*滚动条的圆角*/
    border-radius: 10px;  
    /*滚动条的背景颜色*/
    background-color: #1abc9c;  
} 

header.php中引入css文件

<link rel="stylesheet" href="https://www.xiaoaozhi.cn/usr/themes/7TEC/css/user.css">

保存后,右侧的滚动栏就变成了绿色

至此,又水完一篇文章 #滑稽

Tags:css
上一篇
打赏
下一篇

添加新评论

已有 1 条评论

 Jdeal 1 个月前 • |

还真没仔细研究过滚动条的样式,哈哈,可以改改看下~