为什么border-radius仅在容器触碰到浏览器边缘时才显示？

AI 小北

2026-10-8

问题原因

你遇到的圆角“消失”本质是两个原因共同导致的：

页面根容器body没有设置和卡片区区分的背景色，也没有做居中布局，外层容器.content的圆角裁剪区域默认是透明的，和页面默认背景融为一体，视觉上就像圆角消失了。
小屏媒体查询中你给.content设置了固定宽度500px，当视口宽度小于500px时容器会横向溢出，超出的部分圆角自然看不到；大屏下没有给.content增加外边距，容器贴边时才能看到边缘的圆角对比。

修复方案

直接修改对应CSS即可：

先给body添加基础重置与布局样式：

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 增加浅灰背景，和卡片形成对比，方便看到圆角 */
  background-color: hsl(0, 0%, 95%);
}

调整.content与媒体查询的样式：

/* contains each of the containers (car cards) */
.content {
    display: flex;
    overflow: hidden;
    border-radius: 10px;
    max-width: 1050px; /* 对应3张卡片350px*3的总宽度 */
    margin: 1rem; /* 四周留边，避免容器贴死浏览器边缘 */
}

@media (max-width: 600px) {
    .content {
        flex-direction: column;
        max-width: 500px; /* 固定width改为max-width，适配更小尺寸的屏幕 */
    }
}