文章/答案/技术大牛

发布

社区首页 >问答首页 >如何添加圆角的Blazorise卡图像？

问如何添加圆角的Blazorise卡图像？
EN

Stack Overflow用户

提问于 2020-06-09 14:26:27

回答 1查看 1.5K关注 0票数 0

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

.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个角添加圆角边框。为了将边框半径添加到前两个角落，我需要访问image元素，但是CardImage只有属性source和alt。

css

image

blazorise

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-09 14:31:44

您需要添加一个边框，然后应用边框无线电，我还使用了display:flex;.You，也可以使用不同的背景色到卡上，而不是应用border.Also，而不是使用源。如果你还需要什么，请告诉我。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62284929

复制

相似问题

问如何添加圆角的Blazorise卡图像？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加圆角的Blazorise卡图像？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加圆角的Blazorise卡图像？
EN