CSS滚动条样式兼容IE8和Chrome浏览器

针对IE8:

.scroll {

scrollbar-face-color:#FB4446; /*滚动条3D表面(ThreedFace)的颜色*/

scrollbar-highlight-color:#fff; /*滚动条3D界面的亮边(ThreedHighlight)颜色*/

scrollbar-shadow-color:#eeeeee; /*滚动条3D界面的暗边(ThreedShadow)颜色*/

scrollbar-3dlight-color:#eeeeee; /*滚动条亮边框颜色*/

scrollbar-arrow-color:#000; /*滚动条方向箭头的颜色 */

scrollbar-track-color:#fff; /*滚动条的拖动区域(TrackBar)颜色*/

scrollbar-darkshadow-color:#fff; /*滚动条暗边框(ThreedDarkShadow)颜色*/ }

针对Chrome:

/*---滚动条默认显示样式--*/ 

::-webkit-scrollbar-thumb{  

   background-color:#FB4446;  

   height:50px;  

   outline-offset:-2px;  

   outline:2px solid #fff;  

   -webkit-border-radius:4px;  

   border: 2px solid #fff;  

}  

/*---鼠标点击滚动条显示样式--*/ 

::-webkit-scrollbar-thumb:hover{  

   background-color:#F01360;  

   height:50px;  

   -webkit-border-radius:4px;  

}  

/*---滚动条大小--*/ 

::-webkit-scrollbar{  

   width:8px;  

   height:8px;  

}  

/*---滚动框背景样式--*/ 

::-webkit-scrollbar-track-piece{  

   background-color:#fff;  

   -webkit-border-radius:0;  

}

你可能感兴趣的:(css,css)