如何为 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 class 仅在底部 2 个角添加圆角边框。为了将 border-radius 添加到顶部的两个角，我需要访问 image 元素，但是 CardImage 只有属性 source 和 alt.

Answer 1

您需要添加边框然后应用边框-radius.I 也使用了 display:flex;。您也可以使用不同的背景颜色到卡片正文而不是应用 border.Also，使用而不是 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>

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

How to add rounded corner to Blazorise card image?

css

image

blazorise