border-radius不适用于离子卡

Question

我想在第一张卡片之前添加一个颜色＃F1F1F1的空白区域。 并且还想在离子卡上添加border-radius。 图像如下。

在图像中，左侧和右侧的曲线是离子卡，高于标题和卡之间的空间。

通过在下面的代码中添加section添加空格，但卡边框半径不会很好地显示。 我怎样才能做到这一点？

html的

<ion-header>
<ion-toolbar>
Ionic Cards
</ion-toolbar>
</ion-header>

<ion-content>

<section class="blankspace"></section>

<ion-card class="card">
   //card content
</ion-card>
</ion-content>

的CSS

.blankspace {
border-bottom: 5px solid #F1f1f1;
}

.card {

border-radius: 5px;
}

Answer 1

HTML代码：

<ion-card style="border-radius: 25px;">

为我工作。

Answer 2

也许有效，但不是剪辑内容，试试这个

.card {
  border-radius: 5px;
  overflow: hidden;
}