记事本

用了很久的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