div滚动条样式设计

（转载于Alison的博客http://www.cnblogs.com/zhongzhl/archive/2012/02/04/2337897.html）

这是一个DIV层，加入了一个滚动条功能，当超出范围的时候便会自动出现，你可以拖动滚动条看看效果哦

例1：

 

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

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"> 
2. 文字内容  
3. </div> 

（2）

1. track-color:#ffff33; scrollbar-darkshadow-color:#ffff33; scrollbar-face-color:#ff0033; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff0033"> 
2. 文字内容  
3. </div> 

（3）

1. <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"> 
2. 文字内容  
3. </div> 

（4）
 

1. <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"> 
2. 文字内容  
3. </div> 

（5）
 

1. <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"> 
2. 文字内容  
3. </div> 

（6）
 

1. <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"> 
2. 文字内容  
3. </div> 

（7）
 

1. <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"> 
2. 文字内容  
3. </div> 

（8）
 

1. <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"> 
2. 文字内容  
3. </div> 

（9）
 

1. <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"> 
2. 文字内容  
3. </div> 

（10）
 

1. <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"> 
2. 文字内容  
3. </div> 

（11）
 

1. <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"> 
2. 文字内容  
3. </div> 

（12）
 

1. <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"> 
2. 文字内容  
3. </div> 

（13）
 

1. <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"> 
2. 文字内容  
3. </div> 

（14）
 

1. <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"> 
2. 文字内容  
3. </div> 

（15）
 

1. <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"> 
2. 文字内容  
3. </div> 

（16）
 

1. <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"> 
2. 文字内容  
3. </div> 

（17）
 

1. <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"> 
2. 文字内容  
3. </div> 

（18）
 

1. <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"> 
2. 文字内容  
3. </div> 

（19）
 

1. <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"> 
2. 文字内容  
3. </div>