| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 一、设置方法
- 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 */
}
二、注意事项
- 负值无效：
border-radius不接受负值。 - 单位可选：对于0值，单位可以省略。
- 过度圆角：如果圆角半径大于边框的一半，边框的外观可能会变得不可预测，特别是在内边距或边框厚度较大的情况下。
- 透明边框问题：在某些旧版浏览器中，使用透明边框技巧（为了保持边框渲染正确）可能需要额外的考虑。
- IE兼容性：早期版本的Internet Explorer（如IE8及以下）不支持
border-radius，需要考虑使用图片或其他技巧作为替代方案。 - 性能考量：极端的圆角（如非常大的圆角半径接近元素尺寸）可能影响渲染性能，尤其是在动画或复杂布局中。
通过灵活运用border-radius，你可以创造出丰富多样的视觉效果，提升网页设计的美感和用户体验。
