CSS 的圆角矩形

男娘i 2024-05-06 21:23 29阅读 0赞

## CSS 的圆角矩形 ##

![previewfile\_3079385769][previewfile_3079385769]

通过 `border-radius` 属性使矩形边框带圆角效果成为圆角矩形  
![image-20240224185045016][]

> 语法：`border-radius: length;`

`length` 是内切圆的半径，其数值越大, 弧线越明显

<table> 
 <thead> 
  <tr> 
   <th align="center">border-radius 属性值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><code>length</code></td> 
   <td align="center">定义圆角的形状</td> 
  </tr> 
  <tr> 
   <td align="center"><code>%</code></td> 
   <td align="center">以百分比定义圆角的形状</td> 
  </tr> 
 </tbody> 
</table>

### 生成圆形 ###

> 让 `border-radius` 的值为正方形宽度的一半，或者用 `border-radius: 50%;` 表示宽度的一半

**示例代码:**  
![image-20240224210410371][]

**运行效果:**

![image-20240224210647612][]

### 生成普通的圆角矩形 ###

> 比如让 `border-radius` 的值为矩形高度的一半

**示例代码:**

![image-20240224211535578][]

**运行效果:**  
![image-20240224211813316][]

### **展开写法** ###

`border-radius` 属性是一个简写属性，用于设置四个 `border-*-radius` 属性，写法是一个复合写法，是可以针对四个角分别设置的。

#### **示例1** ####

border-radius:2em;

等价于：

border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;

#### **示例2** ####

border-radius: 10px 20px 30px 40px;

等价于(按照顺时针排列)：

border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;

**示例代码:**  
![image-20240224213502560][]

**运行结果:**

![在这里插入图片描述][1401544507e344869fe37cb9d4b1e5ff.png_pic_center]

[previewfile_3079385769]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/082768f4e20f4a598c9e31beffdbb627.jpeg
[image-20240224185045016]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/970f2e532de44af2958acd522313375c.png
[image-20240224210410371]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/7332f9925bfe4371a906be9b7232ca46.png
[image-20240224210647612]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5b735412004d4b238355267de8a753ac.png
[image-20240224211535578]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d14fd45adae14628ad5a09cbbf9eb0fb.png
[image-20240224211813316]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/206d301b79d142dabb6a5c200ab6ddd4.png
[image-20240224213502560]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0b4ea2e64fcb4b77b5e27a033d35bea9.png
[1401544507e344869fe37cb9d4b1e5ff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0819f390f8b543c682a1337e109df256.png