如何实现从容器中心向外延伸的连续径向渐变/盒阴影效果

要实现从div中心向外延伸至边框外的连续渐变发光且无断裂，核心思路是利用伪元素承载径向渐变背景，让伪元素超出原div的边界范围，这样渐变就能不受容器限制，从中心平滑扩散出去。

以下是完整的实现代码：

HTML 代码 #

<div class="glow-container">
  <img src="your-image-path.jpg" alt="展示图片">
</div>

CSS 代码 #

.glow-container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid #fff;
  border-radius: 8px;
  overflow: visible; /* 必须设置为visible，避免裁剪伪元素 */
}

.glow-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit; /* 继承容器圆角，保持样式统一 */
}

.glow-container::before {
  content: "";
  position: absolute;
  /* 让伪元素向四周扩展20px，控制发光延伸的范围 */
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  /* 从中心向外的径向渐变，透明过渡到发光色 */
  background: radial-gradient(circle at center, rgba(0, 255, 255, 0.8) 0%, transparent 70%);
  z-index: -1; /* 置于容器下方，不遮挡内部内容 */
  border-radius: inherit; /* 同步容器圆角，避免发光边缘出现直角 */
}

关键细节说明 #

1. 伪元素的作用：直接给div设置径向渐变时，渐变会被容器的边界限制，无法超出边框；用伪元素扩展到容器外部后，渐变可以从中心平滑扩散至外部，不会出现断裂。
2. 参数调整：
   • 修改top/left/right/bottom的负值大小，可以控制发光向外延伸的距离；
   • 调整radial-gradient中的颜色、透明度和百分比，能改变发光的颜色、强度和扩散范围；
3. 普通div适配：如果是不含图片的普通div，只需移除img相关样式，直接给容器设置宽高和背景即可。

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