在 CSS3 中,可以用 border-radius 属性实现圆角矩形。最简单的例子如下:
200px; height: 100px; border-radius: 20px; border: 1px solid;
如果将 border-radius 的值设为一个正方形边长的一半,就得到一个圆形:
160px; height: 160px; border-radius: 80px; border: 1px solid;
实际上, 圆角矩形四个角的圆弧半径可以不一样,我们可以用 border-top-left-radius,border-top-right-radius,border-bottom-left-radius 和 border-bottom-right-radius 属性分别设置四个角的值。
另外,四个角也可以设置为椭圆弧形状,例如:
200px; height: 100px; border-radius: 40px / 20px; border: 1px solid;
这个 border-radius 属性只有 Firefox 4.0,Chrome 4.0,Safari 5.0,Opera 11.50 和 IE 9.0 开始的浏览器才支持。旧的 Firefox 支持 -moz-border-radius 属性,而旧的 Chrome 和 Safari 浏览器支持 -webkit-border-radius 属性。
参考资料:
[1] CSS Backgrounds and Borders Module Level 3
[2] border-radius - MDN
[3] CSS3 的圆角 Border-radius