React中CSS box-shadow不显示及组件边框对齐问题求助

1. 屏幕≥600px时.summary__details阴影不显示 #

问题根源 #

• box-shadow语法错误：第四个参数（扩展半径）遗漏单位，1应改为1px；
• 父容器.summary设置了overflow: hidden，直接裁剪了子元素的阴影区域。

修复代码 #

修改媒体查询中的样式，同时调整父容器的溢出属性：

@media (min-width: 600px) {
  .summary {
    grid-template-columns: 1fr 1fr;
    overflow: visible; /* 移除溢出隐藏，让阴影正常显示 */
    border-radius: 2rem; /* 可选：给整体容器加圆角，视觉更统一 */
  }

  .summary__results {
    border-radius: 2rem;
  }

  .summary__details {
    border: 1px solid slategray;
    border-top-right-radius: 2rem; /* 和左侧圆角尺寸统一 */
    border-bottom-right-radius: 2rem;
    box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, 0.1); /* 修正单位，降低透明度更自然 */
  }
}

2. .summary__details与.summary__results边框/高度不对齐 #

问题根源 #

• .summary__details额外添加的border占用了布局空间，导致和左侧高度/位置偏移；
• 网格布局未强制子元素高度一致；
• 左右两侧圆角尺寸不统一（左侧2rem，右侧1rem），视觉上不协调。

修复代码 #

/* 基础样式调整 */
.summary {
  --content-padding: 1.7rem;
  --content-spacing: 1rem;
  display: grid;
  overflow: hidden;
  max-width: 600px;
  align-items: stretch; /* 强制两个网格列高度完全一致 */
}

@media (min-width: 600px) {
  .summary {
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    border-radius: 2rem;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.1); /* 可选：给整体加阴影提升质感 */
  }

  .summary__results {
    border-radius: 2rem;
    border: 1px solid transparent; /* 添加透明边框，抵消右侧的边框宽度，确保高度对齐 */
  }

  .summary__details {
    border: 1px solid slategray;
    border-left: none; /* 移除左侧边框，避免和左侧区域重叠 */
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, 0.1);
  }
}

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