Vue.js

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 class 添加到 v-card

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

css

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

这是一个codepen

Answer 2

v-card 有一个名为 shaped 的属性，它将边框半径应用于左上角和右下角，但我们可以像这样添加自己的边框半径

<v-card shaped class="rounded-corner"></v-card>

CSS

.rounded-corner{
    border-radius:20px;
}

Answer 3

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

为了尽量减少自定义 CSS 并使您的 Vue 应用程序更加一致，您现在可以使用 .rounded-xs、.rounded、.rounded-lg 或 .rounded-xl 类指定 in the docs:

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

Answer 4

您可以使用边框半径来设置任何元素的边框半径的样式。在 Vuetify 的官方文档中，他们展示了它在 div 中的用法。例如，下面的代码给你一个圆角。

<div class="pa-7 secondary rounded-circle d-inline-block"></div>

这是文档 link：https://vuetifyjs.com/en/styles/border-radius/#removing-border-radius

Answer 5

您可以使用：

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

对于Vue.js中的圆卡：

Other Class{
.rounded-0
.rounded-sm
.rounded-md
.rounded-xl
.rounded-pill
.rounded-circle
}

参考Link：https://vuetifyjs.com/en/styles/border-radius/#usage

Vue.js - Vuetify 如何在卡片上制作圆角？

Vue.js - Vuetify how to get rounded corners on cards?

vuetify.js

css