vuetify v-card 只有两个圆角答案

【问题标题】：vuetify v-card only two rounded cornersvuetify v-card 只有两个圆角
【发布时间】：2021-10-02 08:06:37
【问题描述】：

我想要一张只有两个圆角的 v-card。我尝试了以下方法，但没有成功（卡片旋转了 90°）。

模板：

<div class="text-center rotate-ninety ml-n6">
          <v-card 
            hover 
            ripple 
            class="rounded-card py-5 px-2" 
            elevation="10" 
            color="orange" 
          >
              <v-icon 
                color="black" 
                left
              >
                mdi-domain
              </v-icon>
              <span class="black--text">
                Domain
              </span>            
            </v-card>               
          </div>

CSS：

.rotate-ninety {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.rounded-card {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

我错过了什么吗？

非常感谢克里斯

【问题讨论】：

你有四舍五入吗？
你的 css 有作用域吗？
我没听懂你的问题...你能澄清一下吗？
我想要一个有两个完美 90° 角和两个圆角的 v-card。但是我无法更改所有 v-card 的基本形状，因为我在我身边使用了几个 v-card。希望现在更清楚。

标签： css vue.js vuetify.js

【解决方案1】：

尝试覆盖 .v-sheet.v-card 类规则，例如：

.rounded-card .v-sheet.v-card {
    border-radius: 25px 25px 0 0;
}

DEMO

【讨论】：

嗨，Boussadjra Brahim，谢谢！这工作得很好，但我在我身边使用了几张 v-card，我只希望一个看起来像这样，有两个圆角。您知道我如何仅针对一张特定的 v-card 实现这一点吗？
在组件的样式部分添加范围属性，如<style scoped>.v-sheet.v-card {..}</style>
谢谢！这会将效果限制在一个特定的 .vue 页面，但是由于我在一个 .vue 页面（index.vue）中使用了多个 v-card，因此我更改了 index.vue 中所有 v-card 的所有外观我没有想。我只想在一个特定的 .vue 页面（index.vue）中更改一个特定 v-card 的外观。希望能更好地解释它。抱歉，我之前没有解释过。
试用.rounded-card .v-sheet.v-card{...}

【解决方案2】：

使用 Vuetify 自己的in-built helper classes for border radius。

要获得顶级圆牌： <v-card tile class="rounded-tr rounded-tl">

【讨论】：

Hey Anzu Pai，这个解决方案更好。我使用了以下代码：。非常感谢！