使用CSS轻松实现圆角边

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

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

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

代码如下：

CSS

然后，应用这些HTML代码：

ul {
width:180px;
list-style-type:none;
margin:0 auto;
padding:0;
}</p>

<p>li a {
display:block;
position:relative;
border-width:1px 0;
border-color:#ccc;
border-style:solid;
color:#555;
text-decoration:none;
margin:4px 1px;
}</p>

<p>li a span {
display:block;
position:relative;
margin:0 -1px;
border-width:0 1px;
border-color:#ccc;
border-style:solid;
background-color:#eee;
padding:2px 6px;
}</p>

<p>li a:hover {
border-color:#aaa;
color:#333;
}</p>

<p>li a:hover span {
border-color:#aaa;
background-color:#ddd;
}

然后，应用这些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标准，会发现其中很多的乐趣～

你也许会喜欢

• 互联网八卦-浏览器之战
• 使用Google Page Speed优化Web前端性能
• 为什么使用Firebug
• Searchmash，让搜索也成为一种体验
• Ajax和我的Web观