css - 如何为 Blazorise 卡片图像添加圆角？

Question

我正在使用 Blazorise Bulma 卡组件，代码如下：

.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>

我似乎无法为整张卡片添加边框半径？该类infobox仅在底部 2 个角处添加圆角边框。为了将边框半径添加到前 2 个角，我需要访问image元素，但CardImage只有属性source和alt.

Answer 1

您需要添加边框，然后应用边框半径。我也使用了display:flex; .您也可以使用与正文不同的背景颜色来代替边框。此外，使用而不是source。如果您还需要什么，请告诉我。

.infobox {
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color: grey;
  border-radius: 20px;
  width:200px;
  height:100%;
}

.image img{
width:200px;
border-top-left-radius:20px;
border-top-right-radius:20px;

}

.cardtitle{

text-align:center;

}

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

<Card Class="infobox">
<div class="image"><img src="https://www.w3schools.com/w3images/avatar2.png" Alt="Placeholder image"/>
    </div>
    <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>