web-dev-qa-db-fra.com

Vue.js - Vuetify comment obtenir des coins arrondis sur des cartes?

J'essaie d'obtenir des coins arrondis sur une v-card comme je peux obtenir sur un btn, mais cela ne semble pas être possible?

J'ai utilisé

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

Voici mon modèle

    <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>
vue.jsvuetify.js
6
user762579

v-card a des coins arrondis par défaut. Il ne fournit pas d'accessoire nommé round pour lui donner des coins plus arrondis.

Si vous souhaitez avoir des coins plus arrondis par rapport à la valeur par défaut, ajoutez une classe CSS personnalisée à v-card

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

css

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

Voici un codepen

17
Vamsi Krishna