javascript - 是否可以在 v-card 组件中专门使用 Vue/Vuetify 中的多个底部边框

Question

请参阅此处的目标图像：

我需要为我的v-card组件添加 3 个底部边框，但在这样做时遇到了麻烦。

我努力了：

• 使用“边框样式：双”
• 结合使用 box-shadow 和边框
• 添加带有底部边框的外部 div
• 定位，乱七八糟

我尝试的一切看起来都很糟糕，感觉很老套。将这 3 个边框设置添加到 Vuetifyv-card组件底部的正确方法是什么？

标签： javascriptcssvue.jsstylesvuetify.js

Answer 1

v-divider您可以在 中添加一对v-card，并给它们垂直边距：

<template>
  <v-card>
    ...

    <!-- special bottom border lines -->
    <v-divider />
    <v-divider />
  </v-card>
</template>

<style>
.v-divider {
  margin: 8px 0;
}
</style>

演示