{教程}为页面添加多色彩滚动条

图片[1]-{教程}为页面添加多色彩滚动条-月宅酱的博客


摘录自冰凌千品

分享给大家,让大家拥完全自定义的滚动条。

直接把CSS加进自己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;
}

颜色表

#000000 #2F0000 #600030 #460046 #28004D
#272727 #4D0000 #820041 #5E005E #3A006F
#3C3C3C #600000 #9F0050 #750075 #4B0091
#4F4F4F #750000 #BF0060 #930093 #5B00AE
#5B5B5B #930000 #D9006C #AE00AE #6F00D2
#6C6C6C #AE0000 #F00078 #D200D2 #8600FF
#7B7B7B #CE0000 #FF0080 #E800E8 #921AFF
#8E8E8E #EA0000 #FF359A #FF00FF #9F35FF
#9D9D9D #FF0000 #FF60AF #FF44FF #B15BFF
#ADADAD #FF2D2D #FF79BC #FF77FF #BE77FF
#BEBEBE #FF5151 #FF95CA #FF8EFF #CA8EFF
#d0d0d0 #ff7575 #ffaad5 #ffa6ff #d3a4ff
#E0E0E0 #FF9797 #FFC1E0 #FFBFFF #DCB5FF
#F0F0F0 #FFB5B5 #FFD9EC #FFD0FF #E6CAFF
#FCFCFC #FFD2D2 #FFECF5 #FFE6FF #F1E1FF
#FFFFFF #FFECEC #FFF7FB #FFF7FF #FAF4FF
#000079 #000079 #003E3E #006030 #006000
#000093 #003D79 #005757 #01814A #007500
#0000C6 #004B97 #007979 #019858 #009100
#0000C6 #005AB5 #009393 #01B468 #00A600
#0000E3 #0066CC #00AEAE #02C874 #00BB00
#2828FF #0072E3 #00CACA #02DF82 #00DB00
#4A4AFF #0080FF #00E3E3 #02F78E #00EC00
#6A6AFF #2894FF #00FFFF #1AFD9C #28FF28
#7D7DFF #46A3FF #4DFFFF #4EFEB3 #53FF53
#9393FF #66B3FF #80FFFF #7AFEC6 #79FF79
#AAAAFF #84C1FF #A6FFFF #96FED1 #93FF93
#B9B9FF #97CBFF #BBFFFF #ADFEDC #A6FFA6
#CECEFF #ACD6FF #CAFFFF #C1FFE4 #BBFFBB
#DDDDFF #C4E1FF #D9FFFF #D7FFEE #CEFFCE
#ECECFF #D2E9FF #ECFFFF #E8FFF5 #DFFFDF
#FBFBFF #ECF5FF #FDFFFF #FBFFFD #F0FFF0
#467500 #424200 #5B4B00 #844200 #642100
#548C00 #5B5B00 #796400 #9F5000 #842B00
#64A600 #737300 #977C00 #BB5E00 #A23400
#73BF00 #8C8C00 #AE8F00 #D26900 #BB3D00
#82D900 #A6A600 #C6A300 #EA7500 #D94600
#8CEA00 #C4C400 #D9B300 #FF8000 #F75000
#9AFF02 #E1E100 #EAC100 #FF9224 #FF5809
#A8FF24 #F9F900 #FFD306 #FFA042 #FF8040
#B7FF4A #FFFF37 #FFDC35 #FFAF60 #FF8F59
#C2FF68 #FFFF6F #FFE153 #FFBB77 #FF9D6F
#CCFF80 #FFFF93 #FFE66F #FFC78E #FFAD86
#D3FF93 #FFFFAA #FFED97 #FFD1A4 #FFBD9D
#DEFFAC #FFFFB9 #FFF0AC #FFDCB9 #FFCBB3
#E8FFC4 #FFFFCE #FFF4C1 #FFE4CA #FFDAC8
#EFFFD7 #FFFFDF #FFF8D7 #FFEEDD #FFE6D9
#F5FFE8 #FFFFF4 #FFFCEC #FFFAF4 #FFF3EE
#613030 #616130 #336666 #484891 #6C3365
#743A3A #707038 #3D7878 #5151A2 #7E3D76
#804040 #808040 #408080 #5A5AAD #8F4586
#984B4B #949449 #4F9D9D #7373B9 #9F4D95
#AD5A5A #A5A552 #5CADAD #8080C0 #AE57A4
#B87070 #AFAF61 #6FB7B7 #9999CC #B766AD
#C48888 #B9B973 #81C0C0 #A6A6D2 #C07AB8
#CF9E9E #C2C287 #95CACA #B8B8DC #CA8EC2
#D9B3B3 #CDCD9A #A3D1D1 #C7C7E2 #D2A2CC
#E1C4C4 #D6D6AD #B3D9D9 #D8D8EB #DAB1D5
#EBD6D6 #DEDEBE #C4E1E1 #E6E6F2 #E2C2DE
#F2E6E6 #E8E8D0 #D1E9E9 #F3F3FA #EBD3E8
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共2条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片
    • 头像Janervy0
      • 月宅的头像-月宅酱的博客月宅等级-LV1-月宅酱的博客作者0