非常好看的webkit滚动条-综合特效-网页特效

2024/4/20   星期六
设为首页   收藏本页
用户注册   用户登陆

4当前位置：网页特效首页－综合特效－非常好看的webkit滚动条

4网页特效分类

时间特效　　文本特效
状态标题　　背景特效
导航菜单　　图片特效
窗口特效　　按钮特效
鼠标特效　　 CSS特效
表单特效　　综合特效

4本站推荐内容

非常好看的webkit滚动条

类别：综合特效　来源：网络　添加时间：2017/8/18　浏览次数：7030

<!DOCTYPE html>
<html>
<head>
<title>非常好看的webkit滚动条-综合特效-网页特效-站长新动力-msxindl.com</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
/*------ scroller for webkit ----------*/
::-webkit-scrollbar {
	width:8px;
	height:8px;	
	margin:5px 3px;
	padding:5px;
	background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(202, 202, 202, 0.07)),color-stop(100%,rgba(229, 229, 229, 0.07)));
	background: -webkit-linear-gradient(left,rgba(202, 202, 202, 0.07) 0%,rgba(229, 229, 229, 0.07) 100%);
	-webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
	box-shadow: 0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
	background-color: #E5E5E5;
}
::-webkit-scrollbar-button {	}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
	width:0;
	height:0
}
::-webkit-scrollbar-track-piece {
	background-clip:padding-box;
	background-color:whitesmoke;
	border:solid white
}
::-webkit-scrollbar-track-piece:vertical {
	box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.05);
	border-width:1
}
::-webkit-scrollbar-track-piece:horizontal {
	box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.05);
	border-width:1
}
::-webkit-scrollbar-thumb {
	width: 6px;
	height: 6px;
	overflow: visible;
	border-radius: 4px;
	border: solid 1px #A6A6A6;
	background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(233, 233, 233, 0.05)),color-stop(100%,rgba(221, 221, 221, 0.05)));
	background: -webkit-linear-gradient(left,rgba(233, 233, 233, 0.05) 0%,rgba(221, 221, 221, 0.05) 100%);
	-webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,.05);
	box-shadow: 0 2px 1px 0 rgba(0,0,0,.05);
	background-color: #E9E9E9;
}
::-webkit-scrollbar-thumb:hover {
	background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(242, 242, 242, 0.05)),color-stop(100%,rgba(221, 221, 221, 0.05)));
	background: -webkit-linear-gradient(left,rgba(242, 242, 242, 0.05) 0%,rgba(221, 221, 221, 0.05) 100%);
	-webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,.05);
	box-shadow: 0 2px 1px 0 rgba(0,0,0,.05);
	background-color: #F2F2F2;
}
::-webkit-scrollbar-thumb:vertical {
	border-width:1px 1px 1px 1px;
	min-height:24px;
}
::-webkit-scrollbar-thumb:horizontal {
	border-width:1px 1px 1px 1px;
	min-width:24px;
}
::-webkit-scrollbar-thumb:vertical:hover {
}
::-webkit-scrollbar-thumb:horizontal:hover {
}
</style>
</head>
<body>
<div style="width:200px;height:50px;overflow:auto;margin-bottom:1000px;">
非常好看的webkit滚动条，作用于整个页面及DIV滚动条。<br/>
可惜IE和Firefox浏览器不支持。
</div>
</body>
</html>

上一篇综合特效：JQuery分屏(到底部)动态加载网页内容

下一篇综合特效：js控制table插入行删除行上移下移全选全不选反选

4最新综合特效

·js控制table插入行删除行上移下移全选全不选反选
·非常好看的webkit滚动条
·JQuery分屏(到底部)动态加载网页内容
·js禁止Ctrl+鼠标滚轮或键盘缩放网页面大小
·js向table表格中插入添加新行和选择删除行

4热门综合特效

·js禁止Ctrl+鼠标滚轮或键盘缩放网页面大小
·JQuery分屏(到底部)动态加载网页内容
·js控制table插入行删除行上移下移全选全不选反选
·非常好看的webkit滚动条
·js向table表格中插入添加新行和选择删除行

本站部分内容收集整理于网络，如有问题请随时联系站长

，本站将在第一时间内进行处理！
设为首页收藏本站友情链接蜀ICP备08103254号-1 川公网安备51140202000211号最佳浏览环境：IE7.0及以上 1024px×768px

百度统计 51LA统计