Appearance
Border 边框
CSS样式
全部 border 样式代码：
查看代码
.bs-top-line{
height: 2px;
background: linear-gradient(180deg, rgba(1, 19, 47, 0) 0%, #4D9BFF 55%, rgba(255, 255, 255, 0) 100%);
}
/* 边框（用于分割线/容器描边） */
.bs-border-solid{
border-top: 1px solid #0F3C7E;
}
.bs-border-dashed{
border-top: 2px dashed rgba(15, 60, 126, .85);
}
/* 发光容器（示例块） */
.bs-panel{
background: rgba(149, 195, 255, 0.10);
box-shadow: inset 0 0 16px 0 #63A7FF;
}
/* 圆角 */
.bs-radius-0{ border-radius: 0px; }
.bs-radius-2{ border-radius: 2px; }
.bs-radius-4{ border-radius: 4px; }
.bs-radius-8{ border-radius: 8px; }
拆解明细
本页仅描述数据大屏场景下的边框规范（不影响原有基础组件）。以下拆解以设计稿「03 边框」为准：
关键样式 Token
.bs-top-line：顶部分割线（2px 高度的渐变线）。.bs-border-solid：1px 实线（用于容器描边/分割线）。颜色：#0F3C7E。.bs-border-dashed：2px 虚线（用于强调/对比）。.bs-panel：发光容器（背景：rgba(149,195,255,.1)；内发光：inset 0 0 16px #63A7FF）。- 圆角：
.bs-radius-0/2/4/8对应 0/2/4/8px。
结构拆解
- 标题区：左侧「设计规范/Design Code」+ 模块名「BORDER/边框」，右侧序号「03」。
- 边框表格：三列（名称/粗细/举例）；两行示例（实线/虚线）。
- 圆角示例：四个发光容器块，分别标注 0/2/4/8px。
参考图
如需对照像素位置，请以设计稿导出的定位数据为准；本示例采用「自适应缩放」保证在不同分辨率下视觉比例一致。
