css3能够自定义滚动条样式,今天发现了一个花式玩法,一块儿看看? 以前写过网页时滚动条时是否是都这个样子的呢 css
css代码奉上html
body {
background: #06b0b9;
}
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: none;
background: hsl(183, 97%, 27%);
-webkit-box-shadow: none;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border-radius: 10px;
background: #06b0b9;
-webkit-box-shadow: none;
}
复制代码
查了一下兼容表,兼容性我不说啥了(谷谷大佬)(这个表我都想删了)css3
更,,,web
看官提示,火狐IE不行,亲测火狐确实不行,那丫的不支持,url
body {
scrollbar-arrow-color: #06b0b9;
/*三角箭头的颜色*/
scrollbar-face-color: hsl(183, 97%, 27%);
/*立体滚动条的颜色(包括箭头部分的背景色)*/
scrollbar-3dlight-color: #06b0b9;
/*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #06b0b9;
/*滚动条的高亮颜色(左阴影?)*/
scrollbar-shadow-color: #06b0b9;
/*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #06b0b9;
/*立体滚动条外阴影的颜色*/
scrollbar-track-color: #06b0b9;
/*立体滚动条背景颜色*/
scrollbar-base-color: #06b0b9;
/*滚动条的基色*/
}
复制代码
昨天情人节都怎么过的啊,朋友圈彷佛一片和谐spa
body,
html {
width: 100vw;
}
body {
/* background: #06b0b9; */
background: url(01.jpg) no-repeat center;
background-size: 100% 100%;
}
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: hsl(183, 97%, 27%);
-webkit-box-shadow: none;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(0, 0, 0, 0);
-webkit-box-shadow: none;
}
复制代码
敬请各位看官多多斧正。就是想到一种思路,分享出来,没别的意思,我自认为天资通常,因此诸位师兄中必有武功高强,天资聪慧者,望轻拍砖设计