今天在写一个demo 颜色比较艳 Chrome自带的滚动条呈现灰色 和demo颜色很不搭 所以就通过样式修改了自带滚动条
less版本
// 滚动背景
::-webkit-scrollbar {
width: .5rem * @half;
height: .5rem * @half;
// background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.50) 72%, rgba(0, 182, 234, 0.30) 100%);
}
::-webkit-scrollbar-track {
border-radius: 0;
}
// 滚动条
::-webkit-scrollbar-thumb {
border-radius: 0;
background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 1) 72%, #057494 100%);
transition: all .2s;
border-radius: .5rem * @half;
&:hover {
background-color: rgba(95, 95, 95, .7);
}
}
css版本
::-webkit-scrollbar {
width: 0.25rem;
height: 0.25rem;
background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.5) 72%, rgba(0, 182, 234, 0.3) 100%);
}
::-webkit-scrollbar-track {
border-radius: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background-image: linear-gradient(135deg, #1DE9B6 0%, #08c4db 72%, #057494 100%);
transition: all .2s;
border-radius: 0.25rem;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(95, 95, 95, 0.7);
}
效果图
可以设置or不设置背景板
input button 无法设置高度
-webkit-appearance:button;
即可
