Vue.js - Vuetify 如何在卡片上获得圆角？

Question

我正在尝试在 v-card 上获得圆角，因为我可以在 btn 上获得，但这似乎是不可能的？

我用了

<v-card round class="elevation-0">

这是我的模板

    <template>
        <section id="section2">
          <v-parallax :src="require('../../assets/images/members.jpeg')" height="380">
            <v-layout column align-center justify-center>
              <v-flex xs12 sm12 md8>
                <v-card round class="elevation-0">
                    <v-card-title primary-title class="layout justify-center">
                      <h3 v-html="$t('lang.views.home.section4.thank_you')" ></h3>
                    </v-card-title>
                    <v-card-text>
                    </v-card-text>
                </v-card>
              </v-flex>
            </v-layout>
          </v-parallax>
        </section>
    </template>

原文由 user762579 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

v-card 默认有圆角。它没有提供名为 round 的道具来使其具有更多圆角。

如果您希望与默认值相比具有更多圆角，则将自定义 css 类添加到 v-card

 <v-card class="rounded-card">

css

 .rounded-card{
    border-radius:50px;
}

这是一个 代码笔

原文由 Vamsi Krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我想更新 Vamsi Krishna 的答案。 Vuetify 现在提供 v2.3 以来的边框实用程序来快速设置任何元素的边框半径。

To minimize custom CSS and make your Vue app more consitent, you may now use .rounded-xs , .rounded , .rounded-lg or .rounded-xl classes as specified 在文档中：

 <v-card class="rounded-lg">

原文由 Gaetan C. 发布，翻译遵循 CC BY-SA 4.0 许可协议