网站美化自定义浏览器滚动条教程附两款代码-WordPress美化

网站美化自定义浏览器滚动条教程附两款代码-WordPress美化 WordPress 第1张

各大主流的浏览器都能显示,一些浏览器显示原浏览器的滚动条例如Microsoft Edge。

将以下代码放至网站的css代码或主题style.css中即可。

第一款代码

蓝色鼠标移到滚动条会变红色。

/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#018EE8;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
 
/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#FB4446;
height:50px;
-webkit-border-radius:4px;
}
 
/*—滚动条大小–*/
::-webkit-scrollbar{
width:8px;
height:18px;
}
 
/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}

第二款代码

红蓝相间的滚动条

/**====滚动条样式====*/
::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}

 

特别声明:本站的大部分资源多为来自网络,如有资源侵权你的合法利益请联系admin@liecnk.com删除!
利熙博客 » 网站美化自定义浏览器滚动条教程附两款代码-WordPress美化

发表评论

有问题需要联系站长吗

立即联系 进交流群