如何检测Flex布局中四角的元素并动态添加border-radius？

我有多个带不同背景图的div，作为flex子项会根据视口宽度自动换行排列。能不能实时检测哪些元素处于布局的四个角落，只给这些角落元素设置border-radius？

示例布局：

• 3行2列的网格布局
• 2行3列的网格布局
  两种布局下仅四个角落的元素需要添加圆角。

HTML #

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="/javascript/common.js"></script>

    <link rel="stylesheet" href="/css/common/site.css" />
    <link rel="stylesheet" href="/css/page/home.css" />

    <title>Parcero Web Design</title>

    <meta name="description" content="Parcero Web Main Page" />

    <link rel="canonical" href="https://parceroweb.co/index" />
    <link rel="stylesheet" href="https://use.typekit.net/gsc8tmx.css" />

    <link rel="preload" href="/images/catcoder-color.webp" as="image" />
    <link rel="preload" href="/images/oldbooks-color.webp" as="image" />
    <link rel="preload" href="/images/cafe-color.webp" as="image" />
    <link rel="preload" href="/images/customers-color.webp" as="image" />

    <link rel="preload" href="/images/integrate-color.webp" as="image" />
    <link rel="preload" href="/images/result-color.webp" as="image" />
  </head>

  <body>
    <div id="page-content">
      <div id="header-box"></div>

      <div class="container">
        <div class="box" id="city"><p>Nosotros somos locales</p></div>
        <div class="box" id="experience"><p>Años de experiencia</p></div>
        <div class="box" id="technology"><p>Entendemos la tecnología</p></div>
        <div class="box" id="customers"><p>Atrae más clientes</p></div>
        <div class="box" id="integrate"><p>integra tu mundo</p></div>
        <div class="box" id="result"><p>El resultado</p></div>
      </div>

      <!-- <div id="footer-box"></div> -->
    </div>

    <script>
      insert_page_header();
      // insert_page_footer();
    </script>
  </body>
</html>

CSS #

#page-content {
  background-image: url("/images/mockup.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: calc(100vh + var(--footer-height));
}

#page-content::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.88);
  height: calc(100vh + var(--footer-height));
}

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

  padding-left: 10%;
  padding-right: 10%;
}

.box {
  display: inline-block;
  width: 320px;
  aspect-ratio: 1/1;
  color: aliceblue;
  text-align: center;
  font-size: 22px;
  padding-top: 16px;
  font-family: "Quicksand", sans-serif;
}

.container > div:nth-child(odd) {
  background-color: rgba(160, 160, 160, 0.35);
  color: white;
}
.container > div:nth-child(even) {
  background-color: rgba(225, 225, 225, 0.52);
  color: white;
}

#city {
  background-image: url("/images/cafe-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#technology {
  background-image: url("/images/catcoder-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#experience {
  background-image: url("/images/oldbooks-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#customers {
  background-image: url("/images/customers-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#integrate {
  background-image: url("/images/integrate-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#result {
  background-image: url("/images/result-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#experience:hover {
  background-image: url("/images/oldbooks-color.webp");
}

#city:hover {
  background-image: url("/images/cafe-color.webp");
}

#technology:hover {
  background-image: url("/images/catcoder-color.webp");
}

#customers:hover {
  background-image: url("/images/customers-color.webp");
}

#integrate:hover {
  background-image: url("/images/integrate-color.webp");
}

#result:hover {
  background-image: url("/images/result-color.webp");
}

可以通过JavaScript实时计算布局，动态给角落元素添加圆角样式，步骤如下：

1. 编写检测角落元素的函数：

   • 获取容器和所有子项
   • 计算每行能容纳的子项数量（基于容器宽度和子项宽度）
   • 确定四个角落的元素索引：
     • 左上角：索引0
     • 右上角：索引每行数量 - 1
     • 左下角：索引总元素数 - 每行数量
     • 右下角：索引总元素数 - 1
   • 给这四个元素添加圆角类，移除其他元素的圆角类

2. 监听窗口 resize 事件：

   • 窗口大小变化时重新执行检测函数，确保布局变化后圆角能实时更新

3. 添加CSS圆角样式：

   • 定义一个.corner类，设置对应的border-radius值

完整实现代码 #

新增CSS

.corner.top-left { border-radius: 12px 0 0 0; }
.corner.top-right { border-radius: 0 12px 0 0; }
.corner.bottom-left { border-radius: 0 0 0 12px; }
.corner.bottom-right { border-radius: 0 0 12px 0; }

新增JavaScript

function updateCornerElements() {
  const container = document.querySelector('.container');
  const boxes = Array.from(document.querySelectorAll('.box'));
  if (!container || boxes.length === 0) return;

  // 移除所有元素的圆角类
  boxes.forEach(box => {
    box.classList.remove('corner', 'top-left', 'top-right', 'bottom-left', 'bottom-right');
  });

  const boxWidth = boxes[0].offsetWidth;
  const containerWidth = container.offsetWidth;
  // 计算每行能放的元素数（考虑flex的justify-content: center，取整数部分）
  const itemsPerRow = Math.floor(containerWidth / boxWidth);
  const totalItems = boxes.length;

  if (itemsPerRow === 0 || totalItems === 0) return;

  // 确定四个角落的索引
  const topLeftIndex = 0;
  const topRightIndex = itemsPerRow - 1;
  const bottomLeftIndex = totalItems - itemsPerRow;
  const bottomRightIndex = totalItems - 1;

  // 给对应元素添加类
  if (topLeftIndex < totalItems) {
    boxes[topLeftIndex].classList.add('corner', 'top-left');
  }
  if (topRightIndex < totalItems) {
    boxes[topRightIndex].classList.add('corner', 'top-right');
  }
  if (bottomLeftIndex >= 0) {
    boxes[bottomLeftIndex].classList.add('corner', 'bottom-left');
  }
  if (bottomRightIndex >= 0) {
    boxes[bottomRightIndex].classList.add('corner', 'bottom-right');
  }
}

// 初始化执行
window.addEventListener('load', updateCornerElements);
// 窗口 resize 时重新计算
window.addEventListener('resize', updateCornerElements);

注意事项 #

• 如果子项有margin，计算itemsPerRow时要把margin宽度也考虑进去，比如boxWidth + marginRight
• 可以根据需求调整border-radius的数值
• 若容器的justify-content不是center，比如flex-start或flex-end，计算逻辑无需调整，因为我们是基于实际能容纳的数量来算的

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