Vue.js - Vuetify 如何在卡片上获得圆角？答案

【问题标题】：Vue.js - Vuetify how to get rounded corners on cards?Vue.js - Vuetify 如何在卡片上获得圆角？
【发布时间】：2018-11-27 04:32:48
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

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

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

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

css

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

这是codepen

【讨论】：

此外，您可以使用内置的css类，如'rounded'和'rounded-0'等。
只是一个补充，卡片有“形状”的道具，它应用了一个大的边框半径，但只在卡片的左上角和右下角。

【解决方案2】：

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

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

CSS

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

你可以使用：

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

Vue.js中的圆卡：

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

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

【讨论】：