动态flex盒子实现整体圆角效果：如何匹配特定元素添加特殊样式

纯CSS方案（固定每行3列场景） #

你的布局中子元素宽度固定为30%，每行固定展示3个元素，可通过:nth-child与:nth-last-child组合选择器精准匹配四个角的元素，无需依赖显式行结构，可适配任意行数：

• 左上角：始终匹配第一个子元素
• 右上角：始终匹配第一行最后一个元素
• 左下角：匹配最后一行第一个元素，同时给.red类设置高优先级的左下角圆角规则，满足强制保留要求
• 右下角：始终匹配最后一个子元素

修改后的完整CSS代码如下：

section {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    width: 400px;
}
section div {
    width: 30%;
    margin: 5px;
    height: 100px;
    background-color: grey;
}
/* 左上角圆角 */
section div:first-of-type {
    border-top-left-radius: 30px;
}
/* 右上角圆角 */
section div:nth-of-type(3) {
    border-top-right-radius: 30px;
}
/* 匹配最后一行第一个元素，加左下角圆角 */
section div:nth-of-type(3n + 1):nth-last-of-type(-n + 3) {
    border-bottom-left-radius: 30px;
}
/* red类强制保留左下角圆角，优先级更高 */
section div.red {
    background-color: red;
    border-bottom-left-radius: 30px !important;
}
/* 右下角圆角 */
section div:last-of-type {
    border-bottom-right-radius: 30px;
}

通用JS方案（适配任意列数、动态列宽场景） #

如果后续需要调整列数或者使用动态列宽，纯CSS无法灵活适配时，可以用JS自动识别每行首尾元素添加圆角，适配所有flex换行布局场景：

function setBoxRadius(containerSelector) {
    const container = document.querySelector(containerSelector);
    const items = Array.from(container.children);
    if (!items.length) return;
    // 清空原有圆角设置
    items.forEach(item => item.style.borderRadius = '');
    // 计算单行元素数量
    const firstRowTop = items[0].offsetTop;
    let perRowCount = 0;
    for (let i = 0; i < items.length; i++) {
        if (items[i].offsetTop !== firstRowTop) break;
        perRowCount++;
    }
    // 给顶部两角加圆角
    items[0].style.borderTopLeftRadius = '30px';
    items[perRowCount - 1].style.borderTopRightRadius = '30px';
    // 给右下角加圆角
    items[items.length - 1].style.borderBottomRightRadius = '30px';
    // 匹配最后一行第一个元素加左下角圆角
    const lastRowTop = items[items.length - 1].offsetTop;
    const lastRowFirstIndex = items.findIndex(item => item.offsetTop === lastRowTop);
    items[lastRowFirstIndex].style.borderBottomLeftRadius = '30px';
    // 强制red元素保留左下角圆角
    const redItem = container.querySelector('.red');
    if (redItem) redItem.style.borderBottomLeftRadius = '30px';
}
// 页面加载和窗口 resize 时重新计算
window.addEventListener('load', () => setBoxRadius('section'));
window.addEventListener('resize', () => setBoxRadius('section'));

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