如何用HTML/CSS实现带渐变分隔线的透明CSS Grid布局？

要实现单元格透明、背景可见的喷枪式渐变分隔线，可通过伪元素+渐变背景+滤镜模糊的方式完成，无需依赖间隙+模糊图形的方案，具体实现如下：

核心思路 #

借助Grid容器的伪元素，在单元格间隙位置绘制渐变线条，通过filter: blur()实现边缘透明的喷枪效果，同时将伪元素置于单元格下方，既不遮挡内容，又能保持单元格透明，让背景图案完整透出。

代码实现 #

HTML结构 #

<div class="grid-container">
  <div class="grid-item">图标1</div>
  <div class="grid-item">图标2</div>
  <div class="grid-item">图标3</div>
  <div class="grid-item">图标4</div>
  <div class="grid-item">图标5</div>
  <div class="grid-item">图标6</div>
</div>

CSS样式 #

/* 背景图案示例 */
body {
  background: url('你的背景图地址') repeat;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* 取消间隙，避免干扰分隔线布局 */
  position: relative;
  padding: 1px; /* 预留边缘分隔线显示空间 */
}

/* 生成网格分隔线的伪元素 */
.grid-container::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 绘制横向+纵向渐变线条 */
  background-image: 
    linear-gradient(to right, rgba(0,0,0,0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.2) 1px, transparent 1px);
  /* 线条间距匹配Grid行列尺寸 */
  background-size: calc(100% / 3) calc(100% / 2); /* 示例为3列2行，需根据实际行列数调整 */
  pointer-events: none; /* 不干扰单元格交互 */
  filter: blur(1px); /* 实现喷枪模糊边缘效果 */
  z-index: -1; /* 置于单元格下方，不遮挡内容 */
}

.grid-item {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* 保持单元格透明 */
}

关键细节调整 #

• 渐变与Grid匹配：background-size的计算值需和Grid的列数、行数对应，比如4列则横向尺寸改为calc(100% / 4)，行数同理。
• 喷枪效果强度：调整filter: blur()的数值（如0.8px或1.2px），控制线条边缘的模糊透明程度。
• 分隔线颜色：修改渐变中的rgba值，匹配设计需求的分隔线色调和透明度。
• 边缘完整性：容器的padding: 1px确保四周的分隔线不会被容器裁切，若不需要边缘线条可去掉此属性。

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