Element Plus基础组件 | Border边框

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

一、边框样式

运行代码：

<script  setup>

</script>
<template>
  <table class="demo-border">
    <tbody>
      <tr>
        <td class="text">Name</td>
        <td class="text">Thickness</td>
        <td class="line">Demo</td>
      </tr>
      <tr>
        <td class="text">Solid</td>
        <td class="text">1px</td>
        <td class="line">
          <div />
        </td>
      </tr>
      <tr>
        <td class="text">Dashed</td>
        <td class="text">2px</td>
        <td class="line">
          <div class="dashed" />
        </td>
      </tr>
    </tbody>
  </table>
</template>
<style scoped>
.demo-border .text {
  width: 15%;
}
.demo-border .line {
  width: 70%;
}
.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);
}
.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}
</style>

运行结果：

二、圆角

        供了以下几种圆角样式，以供选择。

运行代码：

<template>
  <el-row :gutter="12" class="demo-radius">
    <el-col
      v-for="(radius, i) in radiusGroup"
      :key="i"
      :span="6"
      :xs="{ span: 12 }"
    >
      <div class="title">{{ radius.name }}</div>
      <div class="value">
        <code>
          border-radius:
          {{
            radius.type
              ? useCssVar(`--el-border-radius-${radius.type}`)
              : '"0px"'
          }}
        </code>
      </div>
      <div
        class="radius"
        :style="{
          borderRadius: radius.type
            ? `var(--el-border-radius-${radius.type})`
            : '',
        }"
      />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useCssVar } from '@vueuse/core'

const radiusGroup = ref([
  {
    name: 'No Radius',
    type: '',
  },
  {
    name: 'Small Radius',
    type: 'small',
  },
  {
    name: 'Large Radius',
    type: 'base',
  },
  {
    name: 'Round Radius',
    type: 'round',
  },
])
</script>
<style scoped>
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 40px;
  width: 70%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-top: 20px;
}
</style>

运行结果：

三、阴影

        有以下几种投影样式。

运行代码：

<script lang="ts" setup>
import { ref } from 'vue'

const shadowGroup = ref([
  {
    name: 'Basic Shadow',
    type: '',
  },
  {
    name: 'Light Shadow',
    type: 'light',
  },
  {
    name: 'Lighter Shadow',
    type: 'lighter',
  },
  {
    name: 'Dark Shadow',
    type: 'dark',
  },
])

const getCssVarName = (type: string) => {
  return `--el-box-shadow${type ? '-' : ''}${type}`
}
</script>
<template>
  <div class="flex justify-between items-center flex-wrap">
    <div
      v-for="(shadow, i) in shadowGroup"
      :key="i"
      class="shadow-item"
    >
      <div
        class="shadow-box"
        :style="{
          boxShadow: `var(${getCssVarName(shadow.type)})`,
        }"
      />
      <span class="demo-shadow-text">
        {{ shadow.name }}
      </span>
      <code>
        {{ getCssVarName(shadow.type) }}
      </code>
    </div>
  </div>
</template>

<style scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; 
}

.shadow-item {
  flex: 1 1 46%; 
  max-width: 46%; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shadow-box {
  width: 100px;
  height: 100px; 
  margin: 10px 0; 
}

.demo-shadow-text {
  margin: 4px 0;
  font-size: small;
}

code {
  font-size: x-small;
}
</style>

运行效果：
​​​​​​​

代码解析：

1. CSS Flexbox：使用 flex 布局使子元素能够灵活排列。
2. Flex Wrap：设置 flex-wrap: wrap 使子元素在达到容器宽度限制时自动换行。
3. Flex Basis and Max Width：通过 flex-basis 和 max-width 控制每个阴影效果的宽度，使其能够横排显示。
4. Shadow Box：设置阴影盒子的宽度和高度，以及一些外边距。