如何用CSS实现如图所示的三色渐变发光边框？

当然可以用CSS实现这个效果，核心通过线性渐变定义底色，再结合阴影属性模拟发光效果，以下是具体实现方案：

示例代码 #

.glow-gradient-element {
  width: 300px;
  height: 500px;
  /* 实现从上到下的浅蓝→白色→深蓝渐变 */
  background: linear-gradient(to bottom, #a8dfff, #ffffff, #003366);
  /* 添加内外发光效果，模拟图中的视觉表现 */
  box-shadow: 0 0 22px 6px rgba(168, 223, 255, 0.7),
              inset 0 0 18px rgba(0, 51, 102, 0.4);
  /* 可选：如果需要圆角可以添加 */
  border-radius: 6px;
}

效果说明 #

• linear-gradient 部分：通过指定三个颜色节点，实现垂直方向的渐变过渡，你可以根据原图的颜色深浅，调整#a8dfff、#ffffff、#003366这些色值来精准匹配。
• box-shadow 部分：外部阴影实现浅色的向外发光效果，内部阴影则加深底部的层次感，让渐变的过渡更自然；如果想要更柔和的发光，也可以用filter: drop-shadow(0 0 22px rgba(168,223,255,0.7))替代外部阴影。

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