当前位置 博文首页 > 浮若星光的博客：精美漂亮简洁的CSS滚动条样式及代码
使用css设置漂亮的滚动条样式 使用css设置漂亮的滚动条样式 使用css设置漂亮的滚动条样式 滚动条 漂亮 美观 样式 好看的滚动条样式
html部分
<div id='scroll'>
<div >
<p>雨说：四月已在大地上等待久了…… 等待久了的田圃跟牧场 等待久了的鱼塘和小溪 当田圃冷冻了一冬禁锢着种子 牧场枯黄失去牛羊的踪迹 当鱼塘寒浅留滞着游鱼 小溪渐渐喑哑歌不成调子 雨说，我来了，我来探访四月的大地 我来了，我走得很轻，而且温声细语的 我的爱心像丝缕那样把天地织在一起 我呼唤每一个孩子的乳名又甜又准 我来了，雷电不喧嚷，风也不拥挤</p>
<p>当我临近的时候你们也许知悉了 可别打开油伞将我抗拒 别关起你的门窗，放下你的帘子 别忙着披蓑衣，急着戴斗笠 雨说：我是到大地上来亲近你们的 我是四月的客人带来春的洗礼 为什么不扬起你的脸让我亲一亲 为什么不跟着我走，踩着我脚步的拍子？ 跟着我去踩田圃的泥土将润如油膏 去看牧场就要抽发忍冬的新苗 绕着池塘跟跳跃的鱼儿说声好 去听听溪水练习新编的洗衣谣</p>
<p>雨说：我来了，我来的地方很遥远 那儿山峰耸立，白云满天 我也曾是孩子和你们一样地爱玩可是，我是幸运的 我是在白云的襁褓中笑着长大的 第一样事儿，我要教你们勇敢地笑啊 君不见，柳条儿见了我笑弯了腰啊 石狮子见了我笑出了泪啊 小燕子见了我笑斜了翅膀啊 第二样事，我还是要教你们勇敢地笑 那旗子见了我笑的哗啦啦地响 只要旗子笑，春天的声音就有了 只要你们笑，大地的希望就有了 雨说，我来了，我来了就不再回去 当你们自由地笑了，我就快乐地安息 有一天，你们吃着苹果擦着嘴 要记着，你们嘴里的那份甜呀，就是我祝福的心意</p>
</div>
</div>
css样式
<style>
#scroll{
width:200px;
height:200px;
overflow:auto;
margin-bottom: 20px;
}
#scroll div{
width:400px;
height:400px;
}
#scroll::-webkit-scrollbar{/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
width:10px;
height:10px;
}
/*#scroll::-webkit-scrollbar-button{!*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*!*/
/*background:#fff;*/
/*}*/
#scroll::-webkit-scrollbar-track{/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
background:#f8f9fa;
}
#scroll::-webkit-scrollbar-track-piece{/*内层轨道，滚动条中间部分（位置4）*/
background:#f8f9fa;
}
#scroll::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分（位置5）*/
background:#00000033;
border-radius:4px;
}
#scroll::-webkit-scrollbar-corner {/*边角（位置6）*/
background:#c0c0c0;
}
/*#scroll::-webkit-scrollbar-resizer {!*定义右下角拖动块的样式（位置7）*!*/
/*background:#FF0BEE;*/
/*}*/
#scroll{
scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/
scrollbar-face-color: #333; /**//*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/
}
</style>
