Border 边框

我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件。

// Border 是 CSS 设计变量，无需引入任何组件。

边框样式

我们提供以下几种边框样式，以供选择。

<template>
  <div class="demo-border-style">
    <div class="demo-border-style__head">
      <span>Name</span>
      <span>Thickness</span>
      <span>Demo</span>
    </div>
    <div v-for="item in items" :key="item.name" class="demo-border-style__row">
      <span>{{ item.name }}</span>
      <span>{{ item.thickness }}</span>
      <div class="demo-border-style__line" :style="item.style" />
    </div>
  </div>
</template>

<script lang="ts" setup>
const items = [
  { name: 'Solid', thickness: '1px', style: { borderTop: '1px solid var(--el-border-color)' } },
  { name: 'Dashed', thickness: '2px', style: { borderTop: '2px dashed var(--el-border-color)' } },
]
</script>

<style scoped>
.demo-border-style {
  display: grid;
  grid-template-columns: 120px 120px 1fr;
  row-gap: 16px;
  align-items: center;
  color: var(--el-text-color-regular);
}
.demo-border-style__head {
  display: contents;
  color: var(--el-text-color-secondary);
  font-size: 12px;
}
.demo-border-style__head > span {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
.demo-border-style__row {
  display: contents;
}
.demo-border-style__line {
  height: 0;
}
</style>

圆角

我们提供以下几种圆角样式，以供选择。

<template>
  <div class="demo-border-radius">
    <div v-for="item in items" :key="item.name" class="demo-border-radius__item">
      <div class="demo-border-radius__title">{{ item.name }}</div>
      <div class="demo-border-radius__code">border-radius: {{ item.value }}</div>
      <div
        class="demo-border-radius__box"
        :style="{ borderRadius: item.value }"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
const items = [
  { name: 'No Radius', value: '0px' },
  { name: 'Small Radius', value: 'var(--el-border-radius-small)' },
  { name: 'Large Radius', value: 'var(--el-border-radius-base)' },
  { name: 'Round Radius', value: 'var(--el-border-radius-round)' },
]
</script>

<style scoped>
.demo-border-radius {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}
.demo-border-radius__title {
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-bottom: 6px;
}
.demo-border-radius__code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  padding: 2px 6px;
  background: var(--el-fill-color-light);
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 12px;
}
.demo-border-radius__box {
  width: 100%;
  height: 48px;
  border: 1px solid var(--el-border-color);
}
</style>

阴影

我们提供以下几种阴影样式，以供选择。

<template>
  <div class="demo-border-shadow">
    <div
      v-for="item in items"
      :key="item.name"
      class="demo-border-shadow__box"
      :style="{ boxShadow: item.value }"
    >
      <div class="demo-border-shadow__title">{{ item.name }}</div>
      <div class="demo-border-shadow__code">box-shadow: {{ item.token }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const items = [
  { name: 'Base', token: '--el-box-shadow', value: 'var(--el-box-shadow)' },
  { name: 'Light', token: '--el-box-shadow-light', value: 'var(--el-box-shadow-light)' },
  { name: 'Lighter', token: '--el-box-shadow-lighter', value: 'var(--el-box-shadow-lighter)' },
  { name: 'Dark', token: '--el-box-shadow-dark', value: 'var(--el-box-shadow-dark)' },
]
</script>

<style scoped>
.demo-border-shadow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  padding: 16px;
}
.demo-border-shadow__box {
  background: var(--el-bg-color);
  border-radius: var(--el-border-radius-base);
  padding: 16px;
  min-height: 72px;
}
.demo-border-shadow__title {
  font-size: 14px;
  color: var(--el-text-color-primary);
  margin-bottom: 6px;
}
.demo-border-shadow__code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

API

边框 CSS 变量

名称	默认值
--el-border-width	1px
--el-border-style	solid
--el-border-color	#dcdfe6
--el-border-color-light	#e4e7ed
--el-border-color-lighter	#ebeef5
--el-border-color-extra-light	#f2f6fc
--el-border-color-dark	#d4d7de
--el-border-color-darker	#cdd0d6

圆角 CSS 变量

名称	默认值
--el-border-radius-base	4px
--el-border-radius-small	2px
--el-border-radius-round	20px
--el-border-radius-circle	100%

阴影 CSS 变量

名称	默认值
--el-box-shadow	0 12px 32px 4px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .08)
--el-box-shadow-light	0 0 12px rgba(0, 0, 0, .12)
--el-box-shadow-lighter	0 0 6px rgba(0, 0, 0, .12)
--el-box-shadow-dark	0 16px 48px 16px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .12), 0 8px 16px -8px rgba(0, 0, 0, .16)

参见 Element Plus Border 文档。