标签：class ref png pre idt 阴影 nbsp 元素 ima
前言：我们做前端时，会遇到一些需求，要求把默认浏览器的滚动条样式给改写了，诶。好好的改它干啥了，也带不来用户体验，就是好看点嘛！实现原理其实是用了伪元素，webkit的伪元素实现很强，可以把滚动条当成一个页面元素来定义，再结合一些CSS3属性，比如圆角、渐变、rgba等等。最常见的伪元素，我们最熟悉的元素之前和元素之后（::before/::after）【伪类（:hover/:link）】。这里写了一个Demo，来看看...
一、HTML
<div class="banner_box"></div>
二、CSS
<style> .banner_box { width: 100%; height: 2000px; } /*滚动条样式*/ /*滚动条整体部分*/ ::-webkit-scrollbar { width: 8px; } /*滚动条小方块*/ ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.6); -webkit-border-radius: 5px; /* Safari 和 Chrome */ -moz-border-radius: 5px; /* Firefox */ -o-border-radius: 5px; /* Opera */ border-radius: 5px; } /*滚动轨道两端按钮*/ ::-webkit-scrollbar-button { -webkit-box-shadow: inset 0 0 6px rgba(85,85,85,1); /*border-radius: 10px;*/ background-color: #555; } /*滚动轨道 内阴影*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1); /*border-radius: 10px;*/ background-color: #F5F5F5; } </style>
三、结果
总结：这种CSS特性，可惜不被IE和火狐兼容，其他的都能看到结果，另外还有一种办法，通过div去改写滚动条。
标签：class ref png pre idt 阴影 nbsp 元素 ima
原文地址：http://www.cnblogs.com/webonline/p/6288107.html
