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

原创已于 2025-03-11 16:07:59 修改 · 2.9k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-05-23 00:00:00 首次发布

84 篇文章

订阅专栏

在这里插入图片描述

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】
6	Shader 编程【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程【配置+应用教程 100+】
9	GIS数字孪生与大模型【应用实战 100+】
10	报表与数字大屏【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

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

一、设置方法

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

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

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

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

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

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

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

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

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

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