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

骑猪看日落 2023-10-05 09:58 4阅读 0赞

#### 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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 3 标签元素变为椭圆 ####

实现代码：

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

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

#### 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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 2][]

（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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 3][]

（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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200912224254143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200912224644598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200912223533220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200912224012678.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200912225850786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70