您的位置：首页 > Web前端 > CSS

CSS3 DIY浏览器滚动条样式

2015-03-29 20:21 253 查看
【效果】



【HTML代码】

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---用CSS控制滚动条样式</title>
<style>
/*--IE--*/
body{
scrollbar-arrow-color: #000; /*三角箭头的颜色*/
scrollbar-face-color: #fff; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: #ccc; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #fff; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: #000; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: #999; /*立体滚动条背景颜色*/
scrollbar-base-color:#000; /*滚动条的基色*/
}

/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb{
background-color:#ccc;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover{
background-color:#aaa;
}

/*---滚动条大小--*/
::-webkit-scrollbar{
width:8px;
}

/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}

</style>
</head>
<body>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  CSS3 浏览器 滚动条 DIY 样式
相关文章推荐
新的分享
章节导航