如何使带有图像的v卡变成圆形？

Question

我想将卡片从正方形变成圆形'O'

我尝试通过css更改半径，但仍然无法正常工作

CourseInstance

<v-hover v-slot:default="{ hover }">

<v-card :elevation="hover ? 5 : 2" id="rounded-card">
  <v-img  src="image.jpg" height="300"></v-img>
     <v-fade-transition>
          <v-overlay
            v-if="hover"
            absolute
             style="z-index: 0"
          >
            <h1>Circle Card</h1>
          </v-overlay>
        </v-fade-transition>       
  </v-card>
  </v-hover>

我只希望卡片变成圆形。

Answer 1

将边界半径更改为50％，并确保元素为正方形

#rounded-card {
  border-radius: 50%; 
  min-height: 500px;
  min-width: 500px;
}

请参见https://codepen.io/reijnemans/pen/KKPqprL