用了很久的Google Reader,发现它的按钮很好看(如下图),而且圆角和渐变效果的处理方式也值得学习一下。
一,实现圆角效果
这里的圆角是用border来模拟出来的,把图片放大之后就可以看到其中的奥秘。
分析一下,要实现这种效果,就得用两个div嵌套实现。
<div class="btn-outer"> <div class="btn-inner"> HELLO WORLD </div> </div>
里面的div负责上下的边框,外面的div负责左右的边框,并且左右的边框分别往外扩张一个象素,用负边距可以实现这样的效果。为了实现自适应内容的宽度,这两个div必须浮动,CSS如下:
.btn-outer, .btn-inner { float: left; border-color: #ccc; } .btn-outer { border-width: 1px 0; border-style: solid none; } .btn-inner { margin: 0 -1px; border-width: 0 1px; border-style: none solid; position: relative; }
.btn-inner里面的position: relative是为了修复IE6的BUG,如果不加这个,在IE6下面左右两个边框会消失掉。
二,实现渐变效果
圆角做好之后,接下来制作button的背景,这里的背景是个渐变的效果。Google的做法是加多一个div,并用这个div的背景色和下边框色来模拟渐变的效果。改动一下上面的HTML:
<div class="btn-outer"> <div class="btn-inner"> <div class="btn-top-shadow"></div> <div class="btn-content">HELLO WORLD</div> </div> </div>
接下来改动CSS为:
.btn-outer, .btn-inner { float: left; border-color: #ccc; } .btn-outer { border-width: 1px 0; border-style: solid none; } .btn-inner { font-size: 24px; line-height: 1.4em; color: #333333; margin: 0 -1px; border-width: 0 1px; border-style: none solid; position: relative; background: #E3E3E3; overflow: hidden; } .btn-top-shadow { border-bottom: 0.1em solid #EEEEEE; height: 0.7em; width: 100%; background: #F9F9F9; position: absolute; overflow: hidden; } .btn-content { position: relative; padding: 0 4px; }
其中.btn-inner和.btn-top-shadow的overflow: hidden是为了修复IE6的BUG。可以看出用.btn-inner和.btn-top-shadow的背景色,以及.btn-top-shadow的下边框色就可以实现出渐变。
demo 在chrome 、 ie8 下没有mouseover mouseout 效果啊