CSS 使用border

border-radius

说明：给元素的边框设置圆角，默认不设置圆角为矩形，可以给元素设置圆角将元素变为正圆、椭圆或圆角矩形

语法：

（1）border-radius：50%，给元素设置50%的圆角大小。

（2）border-radius：40% 30%，给元素的左上角、右下角设置40%的圆角大小，给元素的右上角、左下角设置30%的圆角大小。

（3）border-radius：10% 20% 30% 40%，给元素的左上角设置10%的圆角大小，给元素的右下角设置20%的圆角大小，给元素的右上角设置30%的圆角大小、给元素的左下角设置40%的圆角大小。

（4）border-radius：10px，统一给元素的4个角设置10px的圆角大小。

（5）border-radius：10px 20px，给元素的左上角、右下角设置10px的圆角大小，给元素的右上角、左下角设置20px的圆角大小。

（6）border-radius：10px 20px 30px 40px，给元素的左上角设置10px的圆角大小，给元素的右下角设置20px的圆角大小，给元素的右上角设置30px的圆角大小、给元素的左下角设置40px的圆角大小。

注：

（1）以百分比设置圆角大小时，最大值为50%。

（2）以固定值设置圆角大小时，最大值为元素宽度和高度里面最小值的一半。

例如：元素高度为300px，宽度为200px，圆角大小能够设置的最大值为100px。

实现代码：

效果图：

实现代码： 

效果图：

（1）4个角统一圆角大小

实现代码：

效果图： 

 （2）2个角一组设置圆角大小

实现代码：

效果图：

 （3）4个角分别设置圆角大小

实现代码：

效果图：