<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS改变webkit内核浏览器的滚动条样式</title> <style> /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar/*整体部分*/ { width: 5px; height:5px; } ::-webkit-scrollbar-track/*滑动轨道*/ { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0px; background: rgba(0,0,0,0.1); } ::-webkit-scrollbar-thumb/*滑块*/ { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } ::-webkit-scrollbar-thumb:hover/*滑块效果*/ { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.4); } </style> </head> <body> <div style=" height:2400px; background:#f60"></div> </body> </html>