滚动条的设置及颜色

滚动条的设置及颜色  

当div所定义的区域的内容达到一定程度时，在div标签里面嵌入css样式表，定义overflow的属性值，设置滚动条相关的属性。

<style tyle="text/css">

.testDiv{

   border-style: solid ;     

   border-width: 50px ;    

   border-color: pink ;

   position: absolute ; /* 位置 绝对或者相对于最近的一个元素 relative absolute */

   top:200px ;

   left:300px ;

   height:200px ; /* 定义区域的高*/

   width:300px ;

  

   /*   滚动条 */

    /*   overFlow: auto ; */ /* visible ：却省的 hidden auto scroll */

         overFlow-x: scroll ;

       overFlow-y: hidden ;     

  

    /*   滚动条相关的颜色属性 */

     scrollBar-face-color: green;        /* 滑块 */

     scrollBar-hightLight-color: red;    /* 高亮 */

     scrollBar-3dLight-color: orange;    /* 3维光线 */

     scrollBar-darkshadow-color:blue;    /* 暗影    */

     scrollBar-shadow-color:yellow;      /* 阴影   */

     scrollBar-arrow-color:purple;       /* 箭头 */

     scrollBar-track-color:black;         /* 滑道颜色 */

     scrollBar-base-color:pink;          /* 主要颜色 */

  

          

}

</style>

注：

1. overFlow:

visible    却省值，没有滚动条，根据内容自动扩撑区域的大小，即定义的区域无效

scroll     总是显示滚动条

hidden   没有滚动条，超出区域的内容不可见

auto       根据内容自动判断是否添加滚动条

2.滚动条颜色属性：

　　face-color：滑块颜色

　　hightlight-color：高亮颜色

　　3dlight-color：三维光线颜色

　　darkshadow-color：暗影颜色

　　shadow-color：阴影颜色

　　arrow-color：箭头颜色

　　track-color：滑道颜色

       base-color：滚动条的主要颜色，其中包含滚动按钮和滚动滑块

源代码地址：http://www./div_css/topic/index.asp?id=7403

代码列表从左边到右边（上到下）

（1）

<div style="WIDTH: 120; HEIGHT: 140; BACKGROUND-COLOR: #0000C6; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（2）

track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（3）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（4）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（5）

<div style="WIDTH: 120; HEIGHT: 140;OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
文字内容
</div>

文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（6）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（7）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（8）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（9）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（10）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（11）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（12）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（13）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（14）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（15）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（16）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（17）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（18）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
文字内容
</div>
文章来源: Div-Css.net设计网 参考:http://www./div_css/topic/index.asp?id=7403

（19）

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
文字内容
</div>