大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > 纯css美化滚动条

纯css美化滚动条

关键词:css滚动条美化  阅读(930) 赞(52)

[摘要]默认的滚动条有时显得比较难看,现在介绍一下用纯css来对滚动条进行美化的方法。

首先讲解一下滚动条隐藏显示设置:

  overflow内容溢出时的设置

  overflow-x水平方向内容溢出时的设置

  overflow-y垂直方向内容溢出时的设置

  以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

滚动条样式设置:

  

  scrollbar-base-color:#FFFFFF;        /*滚动条的基本颜色*/

  scrollbar-arrow-color:#909090;       /*上下按钮上三角箭头的颜色*/

  scrollbar-3dlight-color:#E5E5E5;     /*立体滚动条亮边的颜色*/

  scrollbar-highlight-color:#FFFFFF;   /*滚动条空白部分的颜色*/

  scrollbar-face-color:#F2F2F2;        /*立体滚动条凸出部分的颜色*/

  scrollbar-darkshadow-color:#CCCCCC;  /*立体滚动条强阴影的颜色*/

  scrollbar-shadow-color:#FAFAFA;      /*立体滚动条阴影的颜色*/

  scrollbar-track-color:#FAFAFA;       /*立体滚动条滑轨的颜色*/


图示:




相关评论