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>

Answer 1

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

如果你想要比默认圆角更多的圆角，那么将自定义 css 类添加到 v-card

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

CSS

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

这是一个codepen