【效果】
【HTML代碼】
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>網頁特效代碼|JsCode.CN|---用CSS控制滾動條樣式</title>
<style>
/*--IE--*/
body{
scrollbar-arrow-color: #000; /*三角箭頭的顏色*/
scrollbar-face-color: #fff; /*立體滾動條的顏色（包括箭頭部分的背景色）*/
scrollbar-3dlight-color: #ccc; /*立體滾動條亮邊的顏色*/
scrollbar-highlight-color: #fff; /*滾動條的高亮顏色（左陰影？）*/
scrollbar-shadow-color: #000; /*立體滾動條陰影的顏色*/
scrollbar-darkshadow-color: #666; /*立體滾動條外陰影的顏色*/
scrollbar-track-color: #999; /*立體滾動條背景顏色*/
scrollbar-base-color:#000; /*滾動條的基色*/
}
/*---滾動條默認顯示樣式--*/
::-webkit-scrollbar-thumb{
background-color:#ccc;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*---鼠標點擊滾動條顯示樣式--*/
::-webkit-scrollbar-thumb:hover{
background-color:#aaa;
}
/*---滾動條大小--*/
::-webkit-scrollbar{
width:8px;
}
/*---滾動框背景樣式--*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}
</style>
</head>
<body>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html> 
