CSS3 DIY浏览器滚动条样式

来源：互联网发布：哪个导航软件最好用编辑：程序博客网时间：2024/05/17 05:04
【效果】
【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>
0 0