如何将CSS Grid与::before/::after伪元素结合实现旋转渐变边框？

你的代码里有三个核心问题导致伪元素在网格单元格中不显示：

1. 选择器不匹配：HTML中目标元素是id="content1"，但CSS里伪元素用的是类选择器.content1::before/.content1::after，应该改用id选择器#content1::before/#content1::after。
2. 父元素未设置相对定位：绝对定位的伪元素需要以设置了position: relative的父元素为定位基准，否则会相对于页面根元素定位，导致位置偏移或被网格容器遮挡。
3. 伪元素未指定宽高：绝对定位元素默认宽高为0，必须显式设置宽高才能显示渐变背景。

修正后的完整代码 #

CSS部分

:root {
  --main-radius: 30px;
  --main-padding: 20px;
}

.container {
  display: grid;
  height: 97vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content1 content2 content3";
  grid-gap: 2rem;
  color: #004d40;
  text-align: center;
}

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  /* 添加相对定位，作为伪元素的定位基准 */
  position: relative;
  /* 隐藏超出部分，避免破坏网格布局 */
  overflow: hidden;
}

/* 修正选择器为id选择器 */
#content1::before {
  content: "";
  border-radius: var(--main-radius);
  background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  position: absolute;
  z-index: -1;
  top: -2%;
  left: -2%;
  /* 设置宽高超出父元素，形成边框效果 */
  width: 104%;
  height: 104%;
  animation: spin 2.5s linear infinite;
}

#content1::after {
  position: absolute;
  content: "";
  top: 20px;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(20px);
  background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content3 {
  background: #73ffba;
  grid-area: content3;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

HTML部分

<div class="container">
  <div id="content1">Content 1</div>
  <div id="content2">Content2</div>
  <div id="content3">Content3</div>
</div>

关键修改说明 #

• 给#content1添加position: relative，让伪元素相对于它定位；同时添加overflow: hidden，确保伪元素超出部分不会破坏网格布局。
• 修正伪元素的选择器，从.content1改为#content1，匹配HTML中的id属性。
• 给#content1::before设置width: 104%和height: 104%，让它稍微超出父元素形成边框效果；移除无效的margin-left和margin-bottom，改用top和left调整位置。

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