← 返回 Web 词条Webborder-radius原生支持点选数值，样本实时变化
圆角
在 Web 上叫border-radius
CSS: border-radius
把元素的直角拐角变成圆弧，以及这段圆弧有多大。
- 四个角变圆
- 不那么方的框
- 卡片角上的弧度
- 圆角
- 圆角半径
- 倒角
示例
border-radius: 12px;
其他平台的相似实现
iOS原生支持
RoundedRectangle异名圆角由形状表达：RoundedRectangle 是「带圆角的矩形，对齐到所在视图的框内」。
看 iOS 视角 →Android原生支持
RoundedCornerShape异名圆角由形状表达：clip 的官方描述是「把内容裁剪到 shape」，圆角是其中一种 shape。
看 Android 视角 →跨端框架实现
- Flutter
BorderRadiusBoxDecoration(borderRadius: BorderRadius…)常用于 BoxDecoration.borderRadius。
使用规范
什么时候用
- 需要让方块看起来更柔和时
- 需要与平台既有控件的外观保持一致时
什么时候别用
- 圆角大到让人误以为是按钮或标签时
- 容器与其内部元素圆角不匹配、导致出现缝隙时