标签:bsp line border width white har space view meta
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动条样式自定义</title> <style> .test{ width: 50px; height: 200px; overflow: auto; float: left; margin: 5px; border: none; background: #f00; } .scrollbar{ width: 30px; height: 300px; margin: 0 auto; background: #0f0; } .test-1::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #535353; } .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; } </style> </head> <body> <div class="test test-1"> <div class="scrollbar"></div> </div> </body> </html>
标签:bsp line border width white har space view meta
原文地址:https://www.cnblogs.com/enhengenhengNymph/p/14667834.html