如何在CSS中制作这样的带有发光效果的三色渐变边框？

Question

正如您注意到的，渐变将从 浅蓝色→白色→深蓝色 从上到下有发光效果

这在 CSS 上可行吗？

Answer 1

@Mark 是的，确实可以使用 CSS 创建具有发光效果的渐变。您可以通过组合

linear-gradient

属性和

box-shadow

属性来获得此值。

这是一个例子：

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #87CEEB, #ffffff, #00008B);
  box-shadow: 0 0 20px rgba(0, 0, 139, 0.5); /* Adjust the color and spread as needed */
}

/* Add other styles for your content */
.content {
  color: white;
  font-size: 24px;
}

在此示例中：

• linear-gradient

  属性用于创建从上到下从浅蓝色 (

  #87CEEB

  ) 到白色再到深蓝色 (

  #00008B

  ) 的渐变。

希望对您的编码有所帮助。