下面样式可直接复制代码：简单实用，先收着。兼容性未测。
| <div style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; overflow: scroll; SCROLLBAR-FACE-COLOR: #a1a198; SCROLLBAR-HIGHLIGHT-COLOR: #eaeaea; SCROLLBAR-3DLIGHT-COLOR: #4d4d4d; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #4d4d4d; SCROLLBAR-DARKSHADOW-COLOR: #000000">文字内容</div> | <div style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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 style="width: 100px; height: 150px; 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> | <div style="width: 100px; height: 150px; overflow: scroll; scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF">文字内容</div>
|
简单使用：
可任意选择一类滚动条样式的DIV应用到自己的网页中。
以第一种滚动条样式为例：
<div style="width: 100px; height: 150px; 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>
读者在文字内容中添加任意内容，另外设定宽度和高度就由width和height后面的值来设定，记定要值后加上px或其它符号。
滚动条相关颜色属性：
scrollbar-base-color：基准颜色 /滚动条的基本颜色
scrollbar-face-color：滑块颜色 /滚动条凸出部分的颜色
scrollbar-hightlight-color：高亮颜色 /滚动条空白部分的颜色
scrollbar-3dlight-color：三维光线颜色 /滚动条亮边的颜色
scrollbar-darkshadow-color：暗影颜色 /滚动条强阴影的颜色
scrollbar-shadow-color：阴影颜色 /立体滚动条阴影的颜色
scrollbar-arrow-color：箭头颜色 /上下按钮上三角箭头的颜色
scrollbar-tack-color：滑道颜色 /滚动条的背景颜色
注：设定了scrollbar-base-color就不要设定其他七个属性了，设定了其他七个属性就不要设定scrollbar-base-color，不然之间可能会有冲突，会有一些效果不起作用的
