边框外观
沿着元素轮廓画出来的一条线，用来标明它的边界在哪里。
- 框子外面那圈线
- 把一块内容围起来的线
- 卡片周围的细边
- 边框
- 描边
- 轮廓线
示例
border: 1px solid #F2F4F7;
Web / iOS / Android 对照
Web原生支持
平台通用范围
border
也叫 边框
CSS: border
iOS原生支持
平台通用范围
border
SwiftUI: .border(_:width:)
Android原生支持
平台通用范围
border
Compose: Modifier.border
官方描述是「以指定的 border 与 shape 添加边框并裁剪」，边框与形状是一起给出的。
使用规范
什么时候用
- 需要让一块区域的边界明确可见时
- 需要用线条区分层级而不用背景色时
什么时候别用
- 只是想分隔两块内容时——分隔线语义更准确
- 仅为装饰而增加视觉噪音时
容易混淆
跨端框架实现
- Flutter
BorderBoxDecoration(border: Border…)常用于 BoxDecoration.border。
给 AI 的提示词
这条词条还没有经过验证的实现提示词。