CSS 使用border-radius属性实现标签元素变为正圆、椭圆、圆角矩形（可以自定义4个角的圆角大小）

1 使用详解

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。

2 标签元素变为正圆

实现代码：

<div style="border-radius:50%;background:red;width:200px;height:200px;display:inline-block;
text-align:center;line-height:200px;">百分比正圆
</div>
<div style="border-radius:100px;background:red;width:200px;height:200px;display:inline-block;
text-align:center;line-height:200px;">px正圆
</div>

效果图：

3 标签元素变为椭圆

实现代码：

<div style="border-radius:50%;background:red;width:300px;height:200px;display:inline-block;
text-align:center;line-height:200px;">
百分比椭圆
</div>

效果图：

4 标签元素变为圆角矩形

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

实现代码：

<div style="border-radius:20%;background:red;width:200px;height:200px;display:inline-block;
text-align:center;line-height:200px;">百分比圆角矩形
</div>
<div style="border-radius:10px;background:red;width:200px;height:200px;display:inline-block;
text-align:center;line-height:200px;">px圆角矩形
</div>

效果图：

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

实现代码：

<div style="border-radius:40% 30%;background:red;width:200px;height:200px;display:inline-block;
text-align:center;line-height:200px;">百分比圆角矩形
</div>
<div style="border-radius:10px 20px;background:red;width:200px;height:200px;display:inline-block;
text-align:center;line-height:200px;">px圆角矩形
</div>

效果图：

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

实现代码：

<div style="border-radius:10% 20% 30% 40%;background:red;width:200px;height:200px;display:inline-block;
text-align:center;line-height:200px;">百分比圆角矩形
</div>
<div style="border-radius:10px 20px 30px 40px;background:red;width:200px;height:200px;display:inline-block;
text-align:center;line-height:200px;">px圆角矩形
</div>

效果图：