Foremire’s Enthusiasm

如果你使用过Google Analytics,你一定会发现左侧的Menu Button（如下图所示）。仔细观察一下，会发现Google使用了轻微的圆角边。通过这些圆角边，发现这些按钮非常美观。

圆角边的实现基本上是通过将一些透明的png图片应用到相应DOM元素的CSS样式上来实现的，即设置元素的background属性。要做到比较漂亮的圆角边，你可能需要一些特殊的图片。

但事实上，可以有更简单的实现。我们不需要任何图片，只需要简简单单的几行CSS，就可以实现了。而且，完全是标准的，不是任何形式的CSS Hack。

代码如下：

CSS

然后，应用这些HTML代码：

然后，应用这些HTML代码：

HTML

<ul>
<li>
<a href=”#”><span>Home</span></a>
<a href=”#”><span>About</span></a>
<a href=”#”><span>Products</span></a>
<a href=”#”><span>Services</span></a>
<a href=”#”><span>Contact</span></a>
</li>
</ul>`

Okay，一切都好了。打开你最喜欢的浏览器，看一看效果：

一切就是这么简单!

如果你对其中原理感兴趣的话，可以发现实现的关键就是一句代码：margin:0 -1px; 通过将margin的属性设置为负数，则内部的元素会溢出，恰巧构成的折现角。其实这并不是真正的圆角，但是肉眼看上去，已经看不出什么差别了。

多研究一下Web标准，会发现其中很多的乐趣～