Frontend Mentor产品卡片：border-radius不生效及宽度适配问题求助

问题1：.right元素圆角不生效 #

• 先确认.right元素有可见的背景或边框——如果没有任何填充样式，圆角不会显示出来，临时给它加个背景色验证效果。
• 检查父容器是否设置了overflow: hidden：如果父容器本身带圆角且开启了overflow: hidden，子元素的圆角会被父容器的裁剪规则覆盖。这种情况要么调整父容器的overflow为visible，要么确保父容器的圆角设置和子元素的圆角逻辑匹配。
• 排查样式覆盖：打开浏览器开发者工具，选中.right元素，查看Styles面板里的border-radius规则是否被划掉。如果是，说明有优先级更高的样式覆盖了它，要么调整选择器的优先级（比如用更具体的选择器），要么临时加!important测试（不建议长期使用，仅用于排查）：

.right {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

• 检查伪元素或阴影：如果.right有box-shadow或者伪元素（比如::before/::after），这些元素的尺寸可能超出圆角范围，导致圆角被遮挡，调整它们的尺寸或圆角属性即可。

问题2：卡片宽度略大于目标项目 #

• 全局设置box-sizing：很多宽度溢出问题都是因为box-sizing默认值导致的，给所有元素设置border-box，让padding和border包含在宽度内：

* {
  box-sizing: border-box;
}

• 核对目标宽度：用浏览器开发者工具查看目标项目卡片的计算宽度（Computed标签），然后把自己的卡片容器宽度调整为对应的值，比如如果目标是340px，就设置width: 340px（如果是固定宽度的话）。
• 检查内部元素：查看卡片内的子元素是否设置了width: 100%同时加了padding，或者有额外的margin导致容器被撑开。比如子元素如果是width: 100%+padding: 20px，在box-sizing: content-box下会超出容器，这时候border-box就能解决。
• 排查flex布局问题：如果用了flex布局，检查子元素的flex-grow是否被设为大于0的值，这会让子元素自动撑大容器，把flex-grow设为0即可。

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