用于WebKit的CSS诀窍[译]（5）

简单的CSS圆角

圆角可能会给网站页面带来一些麻烦，比如，它可能需要为每个角使用一张图片，但是这可能会引起某些表现上的问题（比如不同的浏览器可能表现上会有细微的差别）。在WebKit中有效的CSS3的”border-radius”属性让实现圆角变得简单，它只需要几行简单的CSS代码。如下所示：

 #boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
  text-align:center; background:#eee; }

<div id="boxes">
 <div style="-webkit-border-radius:15px;">
  All sides
 </div>
 <div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;">
  Opposite corners
 </div>
 <div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;">
  Top
 </div>
 <div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;">
  Side
 </div>
</div>

这段样式代码定义所有的在boxes里面的DIV都要有一个比较大的border（边框）、边距、宽度、背景等。然后每个div标签的border-radius被设置为不同的方式。你可以在下面看到运行结果：

截图6. 纯CSS圆角

第一个div中border-radius被设置为所有的角。然后第二个div，只是左下角和右上角。第三个div就像一个tab，只是上面的角被设置为圆角。最后一个div被设置为单边的圆角，只有右边的两个角是圆角。