首页 » 工作 » 正文

一目了然:IE、Chrome滚动条样式设置详解(附:IE滚动条样式生成工具)

发布者:站点默认
2011/11/24 浏览数(5,585) 分类:工作 一目了然:IE、Chrome滚动条样式设置详解(附:IE滚动条样式生成工具)已关闭评论

自定义IE滚动条样式:

样式仅用于IE浏览器,其它浏览器下无效。

用法:

IE5.5+滚动条样式使用示例

IE5.5+滚动条样式使用示例

例子:

<sytle>
/* 000的背景,FFF的滚动条,只需要两个色值 */
div.content {
	scrollbar-track-color: #000;
	scrollbar-3dlight-color: #000;
	scrollbar-darkshadow-color: #000;
	scrollbar-arrow-color: #000;
	scrollbar-face-color: #FFF;
	scrollbar-highlight-color: #FFF;
	scrollbar-shadow-color: #FFF;
}
</style>

下载:

IE滚动条颜色生成器.CHM

 

 

自定义Google Chrome滚动条样式:

GC可以通过伪类来定义滚动条的样式。

效果预览:

Chrome滚动条样式示例

Chrome滚动条样式示例

用法:

Chrome定义滚动条样式的伪类

Chrome定义滚动条样式的伪类

效果预览部分的代码:

<style>
::-webkit-scrollbar-track-piece{
	background-color:#CCC;
	-webkit-border-radius:0;
}
::-webkit-scrollbar{
	width:10px;
}
::-webkit-scrollbar-thumb{
	background-color:#999;
	border:solid 1px #333;
	border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
	background-color:#999;
}
::-webkit-scrollbar-arrow {
	color:#F00;
	backgound:#0F0;
}
</style>
<p>p</p><p>p</p><p>p</p><p>p</p>
<p>p</p><p>p</p><p>p</p><p>p</p>

<完>

点击返回顶部
  1. 留言
  2. 联系方式