css border发光

CSS border发光效果可以给网页增添美感，同时也能引导用户的视线，增强页面内容的吸引力。以下代码演示如何使用CSS实现border发光效果：

/* 添加发光效果的元素 */
.Box{
  width: 200px;
  height: 200px;
  border: 3px solid #fff;
  position: relative;
  padding: 20px;
}
/* 设置阴影颜色和模糊程度 */
.Box::before{
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  z-index: -1;
  Box-shadow: 0 0 3px rgba(255,255,0.8),0 0 10px rgba(255,0.5),0 0 20px rgba(255,0.3),0 0 30px rgba(255,0.1);
}

上述代码中，首先我们为元素添加了一个3像素的白色边框，同时为了让发光效果在边框内侧，我们将元素的padding设置为20像素。接下来，我们使用伪元素::before来添加阴影效果。通过设置阴影的颜色和模糊程度，从而实现发光的效果。

需要注意的是，为了让阴影覆盖在边框上方，我们将伪元素的z-index设置为-1，同时将元素设置为相对定位(position: relative)。

通过上述代码，我们可以轻松地实现CSS border发光效果，为网页增添一份亮丽的色彩。