自定义个性滚动条css样式全程攻略 css改变滚动条样式

分享人:城南诗客来源:互联网7
自定义个性滚动条css样式全程攻略
博易天下&玩转博客——冰河制作
滚动条的美化自然应该列为一个重要的内容放在博客装饰教程中详细的讲解，与博客主色调合理搭配是是滚动条美化的基本要求。大家不应该做出一个与主体完全不符的样式来，这个另类的做法只能让人家一看就知道你是外行来了。冰河今天就整理出这篇文章来希望可以解决大家存在的问题。本文由冰河独立整理完成。如有雷同，纯属巧合！滚动条代码：&nbsp;<STYLE>
BODY{BORDER-LEFT: #ECF1F4 7pxsolid;BORDER-RIGHT: #ECF1F4 7pxsolid;margin:0;/*控制滚动条左右侧实线颜色*/
overflow-x:hidden;/*隐藏底部的横向滚动条*/
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>1.代码说明参照上面的文字说明（文字没有必要删除，如为了美观可以删除。）；2. BORDER-LEFT: #ECF1F4 7px solid;BORDER-RIGHT: #ECF1F4 7pxsolid;margin:0; 这段代码可以删去，根据自己的需要操作即可。
上面的代码的确很麻烦，有没有一种简单直观的形式呢？哈哈这个自然了！我们都喜欢傻瓜式的啦。本人博客的绿色滚动条就是这个工具做的。下面冰河就介绍一下个性滚动条配色工具（一）：

操作说明：

调色的时候先在Flat那里选择Windows，然后根据自己爱好进行调色，调好之后选中“CSS”代码，复制方框里的代码，就可以添加到博客自定义面板了。

注意：这是CSS代码，不能放在完全没有东西的空白面板里，可以把它放到已有内容的面板中。

代码举例：

&nbsp;<style>/*注：在代码前添加　&nbsp;　防止屏蔽*/
BODY { SCROLLBAR-ARROW-COLOR:#0033FF;
SCROLLBAR-FACE-COLOR:#0033CC;
SCROLLBAR-DARKSHADOW-COLOR:#0033CC;
SCROLLBAR-HIGHLIGHT-COLOR:#993399;
SCROLLBAR-3DLIGHT-COLOR:#996633;
SCROLLBAR-SHADOW-COLOR:#993366;
SCROLLBAR-TRACK-COLOR:#996600;}
</style>

个性滚动条配色器（二）：
几种滚动条的特效：　

1、 控制横向和纵向滚动条的显隐

去掉滚动条 x 轴 <body>
去掉滚动条 y 轴 <body>
滚动条 x/y 轴全部去掉 <body scroll="no">

2、滚动条颜色

<style>
BODY{
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #eeeeee;
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;}
</style>

SCROLLBAR-FACE-COLOR 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR 滚动条亮边的颜色
自定义个性滚动条css样式全程攻略 css改变滚动条样式
SCROLLBAR-ARROW-COLOR 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR 滚动条的基本颜色

3、 箭行符号滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

4、 一侧滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dl ight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

5、 朴素型滚动条代码

<style type="text/css">
<!--
BODY {
scrollbar-face-color: white;
scrollbar-highlight-color: hotpink;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

6、一侧滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

7、 立体型滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: pink;
scrollbar-highlight-color: deeppink;
scrollbar-shadow-color: lavenderblush;
scrollbar-3dlight-color: lavenderblush;
scrollbar-arrow-color: white;
scrollbar-track-color: lavenderblush;
scrollbar-darkshadow-color: deeppink}
-->
</style>

?/P>

如果你是新手建议你看文章：如何添加自己的代码到版块（图示）新手必读

添加方法：１，控制面板----首页内容维护----定义空白模板----新建,创建模块标题，粘贴代码--保存并返回；

２，控制面板----定制我的首页----点添加模块----点选创建好的模块标题---勾上并保存，移动新建面板位置--保存设置。做第二步的目的是将建立好的模块在博客个人首页里呈现出来

滚动条的美化自然应该列为一个重要的内容放在博客装饰教程中详细的讲解，与博客主色调合理搭配是是滚动条美化的基本要求。大家不应该做出一个与主体完全不符的样式来，这个另类的做法只能让人家一看就知道你是外行来了。冰河今天就整理出这篇文章来希望可以解决大家存在的问题。本文由冰河独立整理完成。如有雷同，纯属巧合！滚动条代码：&nbsp;<STYLE>
BODY{BORDER-LEFT: #ECF1F4 7pxsolid;BORDER-RIGHT: #ECF1F4 7pxsolid;margin:0;/*控制滚动条左右侧实线颜色*/
overflow-x:hidden;/*隐藏底部的横向滚动条*/
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>1.代码说明参照上面的文字说明（文字没有必要删除，如为了美观可以删除。）；2. BORDER-LEFT: #ECF1F4 7px solid;BORDER-RIGHT: #ECF1F4 7pxsolid;margin:0; 这段代码可以删去，根据自己的需要操作即可。
上面的代码的确很麻烦，有没有一种简单直观的形式呢？哈哈这个自然了！我们都喜欢傻瓜式的啦。本人博客的绿色滚动条就是这个工具做的。下面冰河就介绍一下个性滚动条配色工具（一）：

操作说明：

调色的时候先在Flat那里选择Windows，然后根据自己爱好进行调色，调好之后选中“CSS”代码，复制方框里的代码，就可以添加到博客自定义面板了。

注意：这是CSS代码，不能放在完全没有东西的空白面板里，可以把它放到已有内容的面板中。

代码举例：

&nbsp;<style>/*注：在代码前添加　&nbsp;　防止屏蔽*/
BODY { SCROLLBAR-ARROW-COLOR:#0033FF;
SCROLLBAR-FACE-COLOR:#0033CC;
SCROLLBAR-DARKSHADOW-COLOR:#0033CC;
SCROLLBAR-HIGHLIGHT-COLOR:#993399;
SCROLLBAR-3DLIGHT-COLOR:#996633;
SCROLLBAR-SHADOW-COLOR:#993366;
SCROLLBAR-TRACK-COLOR:#996600;}
</style>

个性滚动条配色器（二）：
几种滚动条的特效：　

1、 控制横向和纵向滚动条的显隐

去掉滚动条 x 轴 <body>
去掉滚动条 y 轴 <body>
滚动条 x/y 轴全部去掉 <body scroll="no">

2、滚动条颜色

<style>
BODY{
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #eeeeee;
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;}
</style>

SCROLLBAR-FACE-COLOR 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR 滚动条的基本颜色

3、 箭行符号滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

4、 一侧滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

5、 朴素型滚动条代码

<style type="text/css">
<!--
BODY {
scrollbar-face-color: white;
scrollbar-highlight-color: hotpink;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

6、一侧滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

7、 立体型滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: pink;
scrollbar-highlight-color: deeppink;
scrollbar-shadow-color: lavenderblush;
scrollbar-3dlight-color: lavenderblush;
scrollbar-arrow-color: white;
scrollbar-track-color: lavenderblush;
scrollbar-darkshadow-color: deeppink}
-->
</style>

?/P>

如果你是新手建议你看文章：如何添加自己的代码到版块（图示）新手必读

添加方法：１，控制面板----首页内容维护----定义空白模板----新建,创建模块标题，粘贴代码--保存并返回；

２，控制面板----定制我的首页----点添加模块----点选创建好的模块标题---勾上并保存，移动新建面板位置--保存设置。做第二步的目的是将建立好的模块在博客个人首页里呈现出来

  
css 滚动条样式 css3 滚动条样式 

爱华网本文地址 » http://www.aihuau.com/a/25101015/275523.html

更多阅读

如何自定义文件夹图标 win7自定义文件夹图标

如何自定义文件夹图标——简介如何制作个性的文件夹图标，一眼就区别开不同的文件夹。如何自定义文件夹图标——工具/原料png图片转化ico图片软件美图秀秀如何自定义文件夹图标——方法/步骤如何自定义文件夹图标 1、从百度图片里

qq空间怎么免费设置背景 qq空间免费自定义背景

qq空间怎么免费设置背景——简介QQ空间采用模块化的设计理念，为我们自定义QQ版面提供了方便的方法，只需要通常简单的拖动即可设计出唯美的个性化风格空间。下面就与小编一起来学习一下QQ空间背景的设计方法。qq空间怎么免费设置背景

怎样自定义QQ空间开场动画？ qq空间开场动画diy

相信大家都想把自己的QQ空间装扮的漂漂亮亮的，那么自定义一个开场动画是分不开的，本文就教大家怎样自定义QQ空间开场动画。首先提醒大家的是：自定义QQ空间开场动画必须是黄钻三级以上。具体制作步骤如下：1、 打开QQ空间2、 点击装扮，

如何设置毕业论文的自定义格式样式及应用格式 毕业论文样式

如何设置毕业论文的自定义格式样式及应用格式——简介毕业论文是对大学学习的一份总结，都希望为自己的大学生活画上完美的句号，提交一份优秀的毕业论文。一份优秀的毕业论文是以规范的格式为前提的，所以在编写论文时，需要先按照学校的规

声明:《自定义个性滚动条css样式全程攻略 css改变滚动条样式》为网友城南诗客分享！如侵犯到您的合法权益请联系我们删除