如何让父容器贴合子元素的border-radius，而非整体修改自身圆角

要实现父容器仅贴合聚焦子元素的圆角，纯CSS由于缺乏父选择器，无法直接根据子元素的状态动态修改父容器样式，因此优先采用JavaScript方案，以下是具体实现：

JavaScript 实现思路 #

1. 监听所有card元素的focus和blur事件
2. 当card聚焦时，计算它在父容器中的位置（是否处于父容器的四个角落）
3. 根据card的位置，给父容器添加对应角落的圆角样式
4. 当card失焦时，移除对应圆角样式；若没有任何card聚焦则清除父容器所有圆角

完整代码示例 #

<div class="wrapper">
  <div class="card" tabindex="0"></div>
  <div class="card" tabindex="0"></div>
  <div class="card" tabindex="0"></div>
  <div class="card" tabindex="0"></div>
</div>

<style>
.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background-color: black;
  transition: border-radius 0.2s; /* 过渡动画优化体验 */
}

.card {
  flex: 30%;
  max-width: 50%;
  height: 30vh;
  box-sizing: border-box;
  border: solid gray;
  background-color: black;
}

.card:focus {
  border-radius: 15px;
  border: solid white;
  outline: none; /* 移除默认聚焦轮廓，避免视觉冲突 */
}
</style>

<script>
const wrapper = document.querySelector('.wrapper');
const cards = document.querySelectorAll('.card');
const borderRadius = '15px'; // 和card聚焦时的圆角值保持一致

// 检查card是否位于父容器的某个角落
function getCardCorners(card) {
  const rect = card.getBoundingClientRect();
  const wrapperRect = wrapper.getBoundingClientRect();
  const corners = [];
  
  // 左上角：card的顶部和左侧与父容器对齐
  if (Math.abs(rect.top - wrapperRect.top) < 1 && Math.abs(rect.left - wrapperRect.left) < 1) {
    corners.push('top-left');
  }
  // 右上角：card的顶部和右侧与父容器对齐
  if (Math.abs(rect.top - wrapperRect.top) < 1 && Math.abs(rect.right - wrapperRect.right) < 1) {
    corners.push('top-right');
  }
  // 左下角：card的底部和左侧与父容器对齐
  if (Math.abs(rect.bottom - wrapperRect.bottom) < 1 && Math.abs(rect.left - wrapperRect.left) < 1) {
    corners.push('bottom-left');
  }
  // 右下角：card的底部和右侧与父容器对齐
  if (Math.abs(rect.bottom - wrapperRect.bottom) < 1 && Math.abs(rect.right - wrapperRect.right) < 1) {
    corners.push('bottom-right');
  }
  
  return corners;
}

// 更新父容器的圆角样式
function updateWrapperBorderRadius() {
  const focusedCards = Array.from(cards).filter(card => document.activeElement === card);
  const allCorners = [];
  
  focusedCards.forEach(card => {
    allCorners.push(...getCardCorners(card));
  });
  
  // 重置父容器圆角
  wrapper.style.borderTopLeftRadius = '0';
  wrapper.style.borderTopRightRadius = '0';
  wrapper.style.borderBottomLeftRadius = '0';
  wrapper.style.borderBottomRightRadius = '0';
  
  // 设置对应角落的圆角
  allCorners.forEach(corner => {
    switch(corner) {
      case 'top-left':
        wrapper.style.borderTopLeftRadius = borderRadius;
        break;
      case 'top-right':
        wrapper.style.borderTopRightRadius = borderRadius;
        break;
      case 'bottom-left':
        wrapper.style.borderBottomLeftRadius = borderRadius;
        break;
      case 'bottom-right':
        wrapper.style.borderBottomRightRadius = borderRadius;
        break;
    }
  });
}

// 绑定事件
cards.forEach(card => {
  card.addEventListener('focus', updateWrapperBorderRadius);
  card.addEventListener('blur', updateWrapperBorderRadius);
});

// 窗口大小变化时重新计算（应对布局变化）
window.addEventListener('resize', updateWrapperBorderRadius);
</script>

说明 #

• 该方案通过监听card的聚焦状态，动态计算并设置父容器对应角落的圆角，完全贴合聚焦card的圆角效果
• 加入窗口resize事件监听，确保布局变化时仍能正确计算card位置
• 圆角值与card聚焦时的border-radius保持一致，保证视觉统一

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