CSS3浏览器横向纵向滚动条样式_中国网站频道，官方网站，中国品牌网站，网页特效，JS广告，网站截图，酷站推荐，图标，APP，按钮，中国网站第一品牌频道网站频道，div css，flash广告代码，网页特效，png图片，后台模板，flash特效，软件下载，中文字体下载，英文字体下载，

> 代码 > 其他整理

CSS3浏览器横向纵向滚动条样式

作者：vip_260 来源：日期：2013/10/25 18:00:57 人气：标签：

CSS3浏览器横向纵向滚动条样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3浏览器横向纵向滚动条样式</title>
<style type="text/css">
html{overflow: auto;}
body{position: absolute;top: 20px;left: 20px;bottom: 20px;right: 20px;padding: 30px;overflow-y: scroll;overflow-x: hidden;}
/* Let's get this party started */
::-webkit-scrollbar{width: 12px;}
/* Track */
::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;}
/* Handle */
::-webkit-scrollbar-thumb{-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}
::-webkit-scrollbar-thumb:window-inactive{background: rgba(255,0,0,0.4);}
</style>
</head>

<body>
<div style=" width:500px; height:300px; overflow-x: auto;overflow-y: auto; font-size:12px; line-height:26px; color:#666;">　　网站频道—专注于互联网前端设计人员，为广大网页设计、问题解答、flash广告代码、网页特效、网站后台模板等资源的交流与分享。<br />
  网站频道汇集了互联网同行业精选问题集锦，并附加下载的开放，为前端设计人员提供了一个很好的展示和学习交流平台。<br />
  网站频道做为国内资源分享网站已服务多年，吸引不少浏览者及固定的访客，这也标志着网站在不断的成长中的发展方向及目标的明确，以至于为更好的服务于前端爱好者为实现这个目标，网站频道愿意和所有热爱前端行业的朋友们一起努力，引领前端设计业内的潮流，为用户提供更好、更新、更优质的服务。
  网站频道—专注于互联网前端设计人员，为广大网页设计、问题解答、flash广告代码、网页特效、网站后台模板等资源的交流与分享。<br />
  网站频道汇集了互联网同行业精选问题集锦，并附加下载的开放，为前端设计人员提供了一个很好的展示和学习交流平台。<br />
  网站频道做为国内资源分享网站已服务多年，吸引不少浏览者及固定的访客，这也标志着网站在不断的成长中的发展方向及目标的明确，以至于为更好的服务于前端爱好者为实现这个目标，网站频道愿意和所有热爱前端行业的朋友们一起努力，引领前端设计业内的潮流，为用户提供更好、更新、更优质的服务。 </div>
</body>
</html>

提示：复制和保存代码功能在FF下无效。

公告

更新

> 代码 > 其他整理

CSS3浏览器横向纵向滚动条样式