Border 边框

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

边框样式

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

Border 边框 - 图1

  1. <template>
  2.   <table class="demo-border">
  3.     <tbody>
  4.       <tr>
  5.         <td class="text">Name</td>
  6.         <td class="text">Thickness</td>
  7.         <td class="line">Demo</td>
  8.       </tr>
  9.       <tr>
  10.         <td class="text">Solid</td>
  11.         <td class="text">1px</td>
  12.         <td class="line">
  13.           <div />
  14.         </td>
  15.       </tr>
  16.       <tr>
  17.         <td class="text">Dashed</td>
  18.         <td class="text">2px</td>
  19.         <td class="line">
  20.           <div class="dashed" />
  21.         </td>
  22.       </tr>
  23.     </tbody>
  24.   </table>
  25. </template>
  26. <style scoped>
  27. .demo-border .text {
  28.   width: 15%;
  29. }
  30. .demo-border .line {
  31.   width: 70%;
  32. }
  33. .demo-border .line div {
  34.   width: 100%;
  35.   height: 0;
  36.   border-top: 1px solid var(--el-border-color);
  37. }
  38. .demo-border .line .dashed {
  39.   border-top: 2px dashed var(--el-border-color);
  40. }
  41. </style>

圆角

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

Border 边框 - 图2

  1. <template>
  2.   <el-row :gutter="12" class="demo-radius">
  3.     <el-col
  4.       v-for="(radius, i) in radiusGroup"
  5.       :key="i"
  6.       :span="6"
  7.       :xs="{ span: 12 }"
  8.     >
  9.       <div class="title">{{ radius.name }}</div>
  10.       <div class="value">
  11.         <code>border-radius: {{ getValue(radius.type) || '0px' }}</code>
  12.       </div>
  13.       <div
  14.         class="radius"
  15.         :style="{
  16.           borderRadius: radius.type
  17.             ? `var(--el-border-radius-${radius.type})`
  18.             : '',
  19.         }"
  20.       />
  21.     </el-col>
  22.   </el-row>
  23. </template>
  25. <script lang="ts" setup>
  26. import { ref } from 'vue'
  28. const radiusGroup = ref([
  29.   {
  30.     name: 'No Radius',
  31.     type: '',
  32.   },
  33.   {
  34.     name: 'Small Radius',
  35.     type: 'small',
  36.   },
  37.   {
  38.     name: 'Large Radius',
  39.     type: 'base',
  40.   },
  41.   {
  42.     name: 'Round Radius',
  43.     type: 'round',
  44.   },
  45. ])
  47. const getValue = (type: string) => {
  48.   const getCssVarValue = (prefix, type) =>
  49.     getComputedStyle(document.documentElement).getPropertyValue(
  50.       `--el-${prefix}-${type}`
  51.     )
  52.   return getCssVarValue('border-radius', type)
  53. }
  54. </script>
  55. <style scoped>
  56. .demo-radius .title {
  57.   color: var(--el-text-color-regular);
  58.   font-size: 18px;
  59.   margin: 10px 0;
  60. }
  61. .demo-radius .value {
  62.   color: var(--el-text-color-primary);
  63.   font-size: 16px;
  64.   margin: 10px 0;
  65. }
  66. .demo-radius .radius {
  67.   height: 40px;
  68.   width: 70%;
  69.   border: 1px solid var(--el-border-color);
  70.   border-radius: 0;
  71.   margin-top: 20px;
  72. }
  73. </style>

阴影

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

Border 边框 - 图3

  1. <template>
  2.   <div class="flex justify-between items-center flex-wrap">
  3.     <div
  4.       v-for="(shadow, i) in shadowGroup"
  5.       :key="i"
  6.       class="flex flex-col justify-center items-center"
  7.       m="auto"
  8.       w="46"
  9.     >
  10.       <div
  11.         class="inline-flex"
  12.         h="30"
  13.         w="30"
  14.         m="2"
  15.         :style="{
  16.           boxShadow: `var(${getCssVarName(shadow.type)})`,
  17.         }"
  18.       />
  19.       <span p="y-4" class="demo-shadow-text" text="sm">
  20.         {{ shadow.name }}
  21.       </span>
  22.       <code text="xs">
  23.         {{ getCssVarName(shadow.type) }}
  24.       </code>
  25.     </div>
  26.   </div>
  27. </template>
  29. <script lang="ts" setup>
  30. import { ref } from 'vue'
  32. const shadowGroup = ref([
  33.   {
  34.     name: 'Basic Shadow',
  35.     type: '',
  36.   },
  37.   {
  38.     name: 'Light Shadow',
  39.     type: 'light',
  40.   },
  41.   {
  42.     name: 'Lighter Shadow',
  43.     type: 'lighter',
  44.   },
  45.   {
  46.     name: 'Dark Shadow',
  47.     type: 'dark',
  48.   },
  49. ])
  51. const getCssVarName = (type: string) => {
  52.   return `--el-box-shadow${type ? '-' : ''}${type}`
  53. }
  54. </script>

源代码

文档 Border 边框 - 图4