CSS 设置圆角，这些便捷技巧你知道吗

短命女 2024-05-28 10:12 91阅读 0赞

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

[查看本专栏目录][Link 1]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

#### 文章目录 ####

*  一、设置方法
 *   *  1、基础用法
     *  2、分别设置四个角的圆角
     *  3、百分比值
     *  4、使用斜杠 \`/\` 分隔对角线上的值
 *  二、注意事项

--------------------

CSS圆角主要通过`border-radius`属性来实现，它可以让你轻松地为元素的边角添加弧度，使界面看起来更加友好和现代化。以下是一些关于`border-radius`的使用场景、示例代码及注意事项的详细介绍：

## 一、设置方法 ##

### 1、基础用法 ###

最简单的使用方式是为所有角设置相同的圆角半径：

.box {
        
      width: 200px;
      height: 100px;
      background-color: #C90;
      border-radius: 10px; /* 四个角都有10px的圆角 */
    }

### 2、分别设置四个角的圆角 ###

如果需要为每个角设置不同的圆角半径，可以按顺序指定四个值：左上、右上、右下、左下：

.box {
        
      width: 200px;
      height: 100px;
      background-color: #C90;
      border-radius: 20px 10px 30px 40px; /* 左上、右上、右下、左下分别设置 */
    }

### 3、百分比值 ###

圆角半径也可以用百分比来表示，这会根据元素的宽度或高度来计算实际的像素值：

.box {
        
      width: 200px;
      height: 100px;
      background-color: #C90;
      border-radius: 25%; /* 所有角都是宽度的25%作为圆角半径 */
    }

### 4、使用斜杠 `/` 分隔对角线上的值 ###

当只需要设置对角线上两个角的相同圆角时，可以使用斜杠`/`来分隔：

.box {
        
      width: 200px;
      height: 100px;
      background-color: #C90;
      border-radius: 20px / 50px; /* 水平方向（左右角）20px，垂直方向（上下角）50px */
    }

## 二、注意事项 ##

1.  **负值无效**：`border-radius`不接受负值。
2.  **单位可选**：对于0值，单位可以省略。
3.  **过度圆角**：如果圆角半径大于边框的一半，边框的外观可能会变得不可预测，特别是在内边距或边框厚度较大的情况下。
4.  **透明边框问题**：在某些旧版浏览器中，使用透明边框技巧（为了保持边框渲染正确）可能需要额外的考虑。
5.  **IE兼容性**：早期版本的Internet Explorer（如IE8及以下）不支持`border-radius`，需要考虑使用图片或其他技巧作为替代方案。
6.  **性能考量**：极端的圆角（如非常大的圆角半径接近元素尺寸）可能影响渲染性能，尤其是在动画或复杂布局中。

通过灵活运用`border-radius`，你可以创造出丰富多样的视觉效果，提升网页设计的美感和用户体验。

[b365e4de32484d3883f4020ecb3f7e1f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/bb2050666eca45dc854ed1a0e98060a8.png
[Link 1]: https://dajianshi.blog.csdn.net/article/details/134372791