SuperAPI AI 工具集

element-plus-design-border

设计与创作

查看项目

更新于 10-15 23:32

技能介绍

用途:该技能提供 Element Plus 组件(按钮、卡片、弹窗等)的边框设计规范,用于理解边框样式、圆角选项与阴影样式,保持视觉设计一致。

主要能力:

  1. 边框宽度与样式变量,如 --el-border-width(1px)、--el-border-style(solid)等。
  2. 边框颜色变量,包括 --el-border-color 及 light、lighter、extra-light、dark、darker 等层级。
  3. 圆角变量:--el-border-radius-base(4px)、--el-border-radius-small(2px)、--el-border-radius-round(20px)、--el-border-radius-circle(100%)。
  4. 阴影变量:--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);。

适用场景:需要统一组件边框、圆角与阴影风格,或按元素重要性选择阴影层级时。

限制:资料未提供安装命令、版本要求、浏览器兼容性及收费信息;深色模式下边框颜色自动调整的说明来自资料,具体实现细节暂未提供。