卡片内图片使用Bootstrap rounded类后圆角显示异常求助

结合你提供的代码，以下是几种可能导致图片圆角效果不符合预期的原因及解决思路：

1. 父容器未设置溢出裁剪 #

你的图片嵌套在.image-row容器中，如果该容器没有设置overflow: hidden，图片的圆角区域可能会被父容器或卡片的背景填充，导致圆角看起来不明显或失效。

解决方法：给.image-row添加溢出裁剪样式：

.image-row {
  overflow: hidden;
}

2. Bootstrap rounded类的样式被覆盖 #

自定义CSS可能存在优先级更高的选择器，覆盖了rounded类的border-radius属性。比如类似.card img或.image-row img的选择器若设置了border-radius: 0或其他值，就会覆盖Bootstrap的默认样式。

排查与解决：

• 打开浏览器开发者工具（F12），选中图片元素，检查Styles面板中border-radius属性是否被划掉（表示被覆盖）。
• 若发现被覆盖，可调整自定义样式优先级，或直接给图片添加更高优先级的样式：

.image-row img.rounded {
  border-radius: 0.5rem !important; /* 替换为你需要的圆角大小 */
}

3. 图片的盒模型或显示属性问题 #

图片默认是inline-block元素，可能存在默认垂直对齐或额外间距，导致圆角渲染异常；或者box-sizing属性未设置为border-box，影响圆角的计算范围。

解决方法：
给图片添加以下样式，确保盒模型和显示属性正确：

.image-row img {
  display: block;
  box-sizing: border-box;
  width: 100%; /* 确保图片占满父容器，避免缩放后圆角比例异常 */
}

4. 卡片的background-clip属性影响 #

你的卡片设置了background-clip: border-box，虽为默认值，但如果图片所在容器与卡片边框重叠，可能导致背景渗透到圆角区域。可尝试调整属性值排查：

.card {
  background-clip: padding-box;
}

内容的提问来源于stack exchange，提问作者br1saturno