/* 一个圆角 */ border-radius: 10px; /* 四个圆角 */ border-radius: 10px 15px 20px 25px; /* 分别设置每个角的圆角效果 */ border-top-left-radius: 10px; border-top-right-radius: 15px; border-bottom-right-radius: 20px; border-bottom-left-radius: 25px;
除了以上的基本使用方法之外,border-radius还有一些较为复杂的用法。比如可以实现哪些角是圆角或非圆角、圆角弯曲的角度大小等等,这些需要了解更加详细的属性,如border-radius-style、border-radius-position、border-radius-image等等。
最后,还需要注意的是,CSS圆角并不是在所有浏览器都支持的,如IE6-8,所以如果需要兼容性更好的圆角效果,建议使用HTML元素里面的图片。