我明白你遇到的问题了——给卡片加了infobox类设置圆角，但只有底部两个角生效，顶部被图片挡住了。这是因为Bulma的card-image容器里的图片默认撑满卡片顶部，它的直角会覆盖卡片的顶部圆角，而Blazorise的CardImage组件表面上确实没有直接设置样式的参数，但我们有几种简单的解决办法：

方法1：给卡片容器添加overflow: hidden（推荐） #

只需要修改你的CSS，给infobox类加上overflow: hidden属性，这样卡片的圆角就会自动裁剪内部的图片，让四个角的圆角都显示出来：

.infobox { 
  border-radius: 20px; 
  overflow: hidden; /* 关键属性，裁剪超出卡片圆角的内容 */
}

这个方案不需要修改任何Blazor代码，就能让整个卡片的圆角生效，是最简洁省心的选择。

方法2：直接给图片添加顶部圆角 #

如果不想用overflow: hidden，可以通过CSS选择器定位到卡片内的图片，单独给它设置顶部圆角，和卡片的圆角值保持一致：

.infobox {
  border-radius: 20px;
}
/* 定位CardImage渲染后的img元素 */
.infobox .card-image img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

方法3：利用Blazorise组件的Attributes参数扩展 #

Blazorise的大部分组件都支持Attributes参数，用来传递额外的HTML属性，我们可以用它给CardImage生成的img标签直接加样式或类：

直接内联样式 #

<Card Class="infobox">
  <CardImage Source="/assets/images/gallery/9.jpg" 
             Alt="Placeholder image"
             Attributes="@(new Dictionary<string, object> { 
               { "style", "border-top-left-radius:20px; border-top-right-radius:20px;" } 
             })"></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>

自定义CSS类 #

先定义类：

.card-top-rounded {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

然后通过Attributes添加类：

<CardImage Source="/assets/images/gallery/9.jpg" 
           Alt="Placeholder image"
           Attributes="@(new Dictionary<string, object> { 
             { "class", "card-top-rounded" } 
           })"></CardImage>

这几种方法都能解决你的问题，其中方法1最省心，不需要额外定位元素或者修改组件参数，推荐优先使用~

内容的提问来源于stack exchange，提问作者one-hand-octopus