标签：
<html> <head> <title></title> <style type="text/css"> .test { width: 500px; height: 300px; border:1px solid #ededed; overflow: scroll; } ::-webkit-scrollbar/*整体部分*/ { width: 10px; height: 0 } ::-webkit-scrollbar-track/*滑动轨道*/ { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0px; background: #fff; } ::-webkit-scrollbar-thumb/*滑块*/ { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #c3c3c3; } ::-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 class="test"> <p>你好</p> <p>你好</p> <p>你好</p> <p>你好</p> <p>你好</p> <p>你好</p> <p>你好</p> <p>你好</p> <p>你好</p> <p>你好</p> <p>你好</p> <p> /* Let‘s get this party started */ ::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px #f6f6f6; /*-webkit-border-radius: 10px;*/ border-radius: 10px; } ::-webkit-scrollbar-track-piece { } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #c3c3c3; /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */ } </p> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/chenqiushi/p/4550554.html
