CSS如何删除背景形状轮廓并为相邻卡片添加白色间隙

问题根因 #

• 背景可见的黑色轮廓有两个来源：一是卡片容器.card-slot本身设置了border: 1px solid black边框，二是所有卡片宽度默认100%堆叠在容器内，下层卡片的边框会从上层卡片边缘漏出
• 卡片之间没有间隙是因为卡片宽度占满容器，且flex布局的容器未设置子元素间距

具体修改 #

直接替换你的CSS代码为以下内容即可：

*, *::after, *::before {
 box-sizing: border-box;   
}

body {
    margin: 2;
    display:grid;
    grid-template-columns: 1000px;
    /* 修复原代码中数字和rem之间的空格错误 */
    grid-template-rows: 7rem 2rem 7rem 2rem 7rem 2rem 7rem;
    column-gap: 3rem;
    row-gap: 1.5rem;
    cursor: pointer;
    justify-content: center;
    padding-top: 5rem;
}

.card-slot{
    height: 100%;
    width: 100%;
    /* 移除容器的黑色边框，消除外层轮廓 */
    /* border: 1px solid black; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3rem;
    border-radius: 0.5rem;
    color: white;
    user-select: none;
    /* 设置卡片之间的白色间隙，可按需调整数值 */
    gap: 4px;
}

.gap{
    grid-column: span 13;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card{
    position: relative;
    height: 100%;
    /* 调整卡片宽度，适配13张卡片 + 间隙的总宽度 */
    width: calc((100% - 12 * 4px)/13);
    border: 1px solid black;
    border-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    background: #fff;
}

.card.red{
    color: red;
}

.card.black{
    color: black;
}

.card::before,
.card::after{
    position: absolute;
    content: attr(data-value);
    font-size: 0.9rem;
}

.card::before{
    top: .5rem;
    left: .5rem;
}

.card::after{
    bottom: .5rem;
    right: .5rem;
    transform: rotate(180deg);
}

关键修改说明 #

1. 移除了.card-slot的黑色边框，同时删除了会影响所有元素的通用div宽度设置
2. 给.card-slot添加了gap: 4px实现卡片之间的白色间隙，可按需调整数值大小
3. 调整了.card的宽度计算逻辑，自动适配13张卡片加间隙的总宽度，避免卡片堆叠
4. 修复了原grid-template-rows属性中数字和单位之间的空格错误，确保网格布局正常生效

内容的提问来源于stack exchange，提问作者Joseph K.