web-dev-qa-db-ja.com

Vue.js-カードの角を丸くする方法を検証しますか？

私はbtnに乗ることができるので、vカードの角を丸くしようとしていますが、それは可能ではないようですか？

使った

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

v-cardはデフォルトで角が丸くなっています。 roundという名前のプロップは提供されず、角を丸くします。

デフォルトと比較して角を丸くしたい場合は、カスタムCSSクラスをv-cardに追加します

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

cSS

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

これは codepen です

17
Vamsi Krishna