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使其具有更圆角的道具.

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

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

CSS

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

这是一个codepen

Answer 2

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

为了最大限度地减少自定义的CSS，使您的Vue公司的应用程序更consitent，你现在可以使用.rounded-xs，.rounded，.rounded-lg或.rounded-xl按指定类别的文档：

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