HTML5移动Web开发指南——6.5 圆角边框

圆角边框 以前，我们在Web开发过程中，经常需要实现一些圆角的功能，一般的解决方案是使用图像文件实现边框圆角的效果。 现在，CSS3已经能够轻松地实现圆角效果，代码中只要定义border-radius属性，就可以随意实现圆角效果。 到目前为止，border-radius属性已经得到Chrome浏览器、Safari浏览器、Opera浏览器、Firefox浏览器的支持。但浏览器之间样式名称的写法有些差别，例如Chrome浏览器和Safari浏览器需要写成-webkit-border-radius；Firefox浏览器需要写成-moz-border-radius；而Opera浏览器则不需要加前缀，只需要写成border-radius即可。 示例代码如下： border-radius:10px 5px; -moz-border-radius:10px 5px; -webkit-border-radius:10px 5px; 或 border-radius:10px 5px 10px 5px; -moz-border-radius:10px 5px 10px 5px; -webkit-border-radius:10px 5px 10px 5px; 需要注意的是，border-radius属性是不允许使用负值的，当其中一个值为0时，则该值对应的角为矩形，否则为圆角。