用途:该技能提供 Element Plus 组件(按钮、卡片、弹窗等)的边框设计规范,用于理解边框样式、圆角选项与阴影样式,保持视觉设计一致。
主要能力:
- 边框宽度与样式变量,如 --el-border-width(1px)、--el-border-style(solid)等。
- 边框颜色变量,包括 --el-border-color 及 light、lighter、extra-light、dark、darker 等层级。
- 圆角变量:--el-border-radius-base(4px)、--el-border-radius-small(2px)、--el-border-radius-round(20px)、--el-border-radius-circle(100%)。
- 阴影变量:--el-box-shadow、--el-box-shadow-light、--el-box-shadow-lighter、--el-box-shadow-dark,并给出对应取值。
使用方式:在 CSS 中通过 var() 引用上述变量,例如 border-radius: var(--el-border-radius-base); 或 box-shadow: var(--el-box-shadow-light);。
适用场景:需要统一组件边框、圆角与阴影风格,或按元素重要性选择阴影层级时。
限制:资料未提供安装命令、版本要求、浏览器兼容性及收费信息;深色模式下边框颜色自动调整的说明来自资料,具体实现细节暂未提供。