如何添加圆角到Blazorise卡图像？

Question

我使用的是Blazorise Bulma卡组件，代码如下:

null

.infobox {
  border-radius: 20px;
}

<Card Class="infobox">
    <CardImage Source="/assets/images/gallery/9.jpg" Alt="Placeholder image">
    </CardImage>
    <CardBody>
        <CardTitle Size="5">Card title</CardTitle>
        <CardText>
            Some quick example text to build on the card title and make up the bulk of the card's content.
        </CardText>
        <Button Color="Color.Primary">Button</Button>
    </CardBody>
</Card>

null

我似乎无法在整张卡片上加上一个边框半径？ InfoBox类只在底部2个角添加圆角边框。 为了向顶部的2个角添加border-radius，我需要访问image元素，但是cardimage只有属性source和alt。

Answer 1

你需要添加一个边框然后应用border-radius.我也用过display:flex；。如果你还需要什么，请告诉我。

null

.infobox {
  display:flex;
  align-items:center;
  border-radius: 20px;
  padding:2px;
  border:1px solid;
  width:200px;
  height:150px;
}

.cardtitle{

text-align:center;

}

.btn{
display:flex;
margin-left:auto;
margin-right:auto;
}

<Card Class="infobox">
    <CardImage Source="/assets/images/gallery/9.jpg" Alt="Placeholder image">
    </CardImage>
    <CardBody>
        <h4 class="cardtitle" Size="5">Card title</h4>
        <CardText>
            Some quick example text to build on the card title and make up the bulk of the card's content.
        </CardText>
        <Button class="btn" Color="Color.Primary">Button</Button>
    </CardBody>
</Card>