CSS设置的卡片border-radius属性在宽屏场景下不生效如何解决？

问题根因 #

宽屏下圆角失效的核心原因是非激活态.panel元素的实际宽度不足以承载设置的圆角大小：

• 你设置的border-radius: 50px要求元素宽度至少达到100px才能完整显示左右两个圆角，若宽度小于100px，浏览器会自动等比例压缩圆角数值，最终看起来和直角无差异。
• 宽屏场景下，.container宽度为90vw会随屏幕宽度增大而变宽，非激活态.panel的flex: 0.2分配到的宽度如果低于100px阈值，就会出现圆角失效的问题。

修复方案 #

方案1：设置最小宽度（最推荐） #

给.panel新增最小宽度限制，保证元素宽度足够容纳圆角，改造成本最低，不影响原有交互逻辑：

.panel {
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
   height: 80vh;
   border-radius: 50px;
   color: white;
   cursor: pointer;
   flex: 0.2;
   margin: 15px;
   position: relative;
   transition: flex 0.7s ease-in;
   overflow: hidden;
   /* 新增最小宽度配置，和圆角的2倍值对齐即可 */
   min-width: 100px;
}

方案2：使用自适应圆角 #

如果希望圆角大小跟随元素尺寸自动调整，可以用动态单位替换固定像素值：

.panel {
   /* 最小圆角10px，最大50px，中间跟随视口宽度动态调整 */
   border-radius: clamp(10px, 5vw, 50px);
}

方案3：限制容器最大宽度 #

如果不希望超宽屏下卡片布局过于松散，可以给外层容器加最大宽度限制，避免非激活态卡片被压缩过窄：

.container {
   display: flex;
   width: 90vw;
   overflow: hidden;
   /* 可根据业务需求调整最大宽度数值 */
   max-width: 1200px;
}

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