Question

我正试图在v-card上获得圆角，因为我可以使用btn，但似乎不可能？

我用过

add_filter( 'wp_get_nav_menu_items','nav_items', 11, 3 );
function nav_items( $items, $menu, $args ) {

     if( is_admin() )
        return $items;

    foreach( $items as $item ) {
        if( 'profil' == $item->post_title ) {
            $current_user = wp_get_current_user();
            $username = $current_user->user_login;
            $item->url .= '/members/' . $username./notifications;
        }
    }

    return $items;
}

这是我的模板

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

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应用程序更加方便，您现在可以使用in the docs指定的.rounded-xs，.rounded，.rounded-lg或.rounded-xl类：

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

Answer 3

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

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

CSS

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

Answer 4

您可以使用边界半径来设置任何元素的边界半径的样式。在Vuetify的官方文档中，他们在div中显示了其用法。例如，下面的代码为您提供了一个圆形的圆圈。

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

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

Vue.js - Vuetify如何在牌上获得圆角？

4 个答案:

CSS