1、IE与谷歌浏览器是支持滚动条改变颜色，其它浏览器暂时接触不多，就不说明，打开Dreamweaver，新建一个html文档
2、在HTML文档里，添加css样式，<style type="text/css">div{ width: 200px; height: 200px; padding: 20px; overflow: auto; scrollbar-arrow-color: #000000; scrollbar-face-color: #00ff99; scrollbar-highlight-color: #999933; scrollbar-shadow-color: #666666; scrollbar-track-color: #CCCC66; } </style>
3、重点解释css里的滚动条属性：scrollbar-arrow-color 是指滚动条里三角箭头的颜色，示例用的是黑色scrollbar-face-color是指滚动条里滑块的颜色，示例用的绿色scrollbar-highlight-color是指滚动条整体边框颜色，示例用的暗黄色scrollbar-shadow-color: 是指滚动条阴影的颜色，示例用的灰黑色scrollbar-track-color: 是指滚动条轨道颜色，示例用的淡黄色将body的内容完善，准备测试看看是否有效
4、在body里，我们随意填充5组A到D的重复数据，选择IE浏览，观看效果，如图所示：三角箭头黑色，滑块绿色，轨道颜色淡黄色，都很清晰的显示出来，边框不明显，可以加粗测试！
5、最后，完善整体代码，希望所有人都可以完整测试出来<!DOCTYPE html><html><head><meta charset=媪青怍牙"UTF-8"><title>Document</title> <style type="text/css"> div{width: 200px;height: 200px;padding: 20px;overflow: auto;/*三角箭头的颜色 -->黑色*/ scrollbar-arrow-color: #000000;/*滚动条滑块按钮的颜色 -->绿色*/ scrollbar-face-color: #00ff99;/*滚动条整体颜色-->暗黄色*/ scrollbar-highlight-color: #999933;/*滚动条阴影-->灰黑*/ scrollbar-shadow-color: #666666;/*滚动条轨道颜色-->淡黄色*/ scrollbar-track-color: #CCCC66; } </style></head><body> <div id="div1">A: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaB: C: D:A: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaB: C: D: A: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaB: C: D: A: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaB: C: D: A: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaB: C: D: A: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaB: C: D： </div></body></html>
