css设置页面滚动条 scrollbar样式风格

2016-03-02    编辑:kepeer     点击(
文章主要是一个简单的css设置页面滚动条 scrollbar样式风格实例,有时会看到很多创意性的网站滚动条都与我们一般的不一样,其实很简单只要使用下面的代码你一样可以实现哦。

把代码放到如下图位置

 

css代码如下

 代码如下 复制代码

<style type="text/css">
body, html {
    scrollbar-face-color: #353535;
    scrollbar-shadow-color: #565656;
    scrollbar-highlight-color: #565656;
    scrollbar-3dlight-color: #7F7F7F;
    scrollbar-darkshadow-color: #565656;
    scrollbar-track-color: #565656;
    scrollbar-arrow-color: #DADADA;
}
</style>

由于在 xhtml 中 定义在 body 上是没有效果的,所以为了通用,可以在 body 和 html 标签都定义一下。

这些属对应图例如下:

 好了,下面预览你的html页面看看是不是滚动条的色变成你设置的色彩了哦。