边框

边框用于定义界面边界、信息分组和浮层层级。VISTA B 沿用 Element Plus 的边框变量，但在使用方式上保持克制：边框只负责建立结构关系，不承担装饰目的。

边界层级

常规界面里优先使用浅边框。只有当容器需要比周围内容更明确的边界时，才提高边框强度。

弱边界--vista-border-soft

用于分割线、卡片边缘、低强调容器。

常规边界--vista-border

用于输入框、表格、明确可交互区域。

强调边界--vista-border-strong

用于悬浮面板、拖拽区域或需要更强识别的状态。

虚线边界2px dashed

用于上传、添加、空状态引导等临时占位区域。

圆角

默认圆角统一为 8px。同一页面内不要为了视觉变化任意混用多种圆角，除非组件语义本身需要区分。

0px

用于表格内部分割、贴边布局和无容器感区域。

2px

用于极小控件或需要轻微圆角的局部元素。

8px

用于按钮、输入框、卡片、弹窗等常规组件。

Round

用于标签、胶囊按钮和状态筛选项。

阴影

阴影只用于表达浮层关系。静态内容区域优先使用边框，不用阴影制造层级。

Light--vista-shadow-light

用于下拉、浮层、轻量卡片。

Base--vista-shadow-base

用于需要轻微脱离页面的容器。

Popover--vista-shadow-popover

用于弹出层、菜单、提示气泡。

使用规则

• 常规分组优先使用 1px solid var(--vista-border-soft)。
• 表单、表格和可点击容器使用 var(--vista-border)，避免边界过浅影响识别。
• 虚线边框只用于引导和占位，不用于普通卡片。
• 阴影不要和粗边框同时强化同一个容器。
• 大面积后台页面保持边框轻、圆角统一、阴影少。

变量

边框色

变量	用途	VISTA B 值
--vista-border-soft	弱分割线、轻量容器	#e7e8eb
--vista-border	常规边框、输入区域	#d0d2d7
--vista-border-strong	强调边界、拖拽区域	#b8bcc3
--el-border	Element Plus 通用边框	1px solid var(--el-border-color)

圆角

变量	用途	VISTA B 值
--el-border-radius-small	小控件圆角	2px
--el-border-radius-base	常规组件圆角	8px
--el-border-radius-round	胶囊圆角	20px
--el-border-radius-circle	圆形控件	100%

阴影

变量	用途
--vista-shadow-light	轻量浮层
--vista-shadow-base	常规浮层
--vista-shadow-popover	弹出层和菜单