← 返回 Web 词条Webborder原生支持点选数值,样本实时变化
边框
在 Web 上叫border
CSS: border
沿着元素轮廓画出来的一条线,用来标明它的边界在哪里。
- 框子外面那圈线
- 把一块内容围起来的线
- 卡片周围的细边
- 边框
- 描边
- 轮廓线
示例
border: 1px solid #F2F4F7;
其他平台的相似实现
iOS原生支持
border同名看 iOS 视角 →Android原生支持
border同名官方描述是「以指定的 border 与 shape 添加边框并裁剪」,边框与形状是一起给出的。
看 Android 视角 →跨端框架实现
- Flutter
BorderBoxDecoration(border: Border…)常用于 BoxDecoration.border。
使用规范
什么时候用
- 需要让一块区域的边界明确可见时
- 需要用线条区分层级而不用背景色时
什么时候别用
- 只是想分隔两块内容时——分隔线语义更准确
- 仅为装饰而增加视觉噪音时