css 边框发光效果

### 使用 CSS 实现边框发光效果

#### 利用伪元素创建逐渐发光的方格边框

为了实现一个带有发光效果的正方形，可以采用 `::before` 和 `::after` 这两个伪类来构建额外图层，在这些图层上应用渐变颜色以及模糊滤镜以模拟光晕现象[^1]。

.square {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #fff;
}

.square::before,
.square::after {
    content: '';
    position: absolute;
    top: -15%;
    bottom: -15%;
    left: -15%;
    right: -15%;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 80px rgba(255, 255, 255, .7);
    filter: blur(30px);
}

上述代码片段定义了一个名为 `.square` 的容器，并通过其伪元素实现了向外扩展并带有一定的白色半透明阴影的效果。这种技术不仅限于简单的矩形对象；也可以应用于其他形状，只需调整相应的样式属性即可适应不同的需求。

#### 动态发光特效动画

对于更复杂的场景，比如想要创建持续闪烁或是移动光源的感觉，则需要用到 CSS 动画功能。这里给出一段基于关键帧的关键字驱动的时间线描述，它能够使圆形边界呈现出周期性的亮度变化[^3]：

@keyframes pulse {
    from {box-shadow: 0 0 0 0 rgba(66, 212, 244, 0.9);}
    to   {box-shadow: 0 0 0 20px rgba(66, 212, 244, 0);}
}

.circle-pulse {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

这段代码中的 `pulse` 关键帧序列控制着盒子投影（即所谓的“光芒”）从小到大再消失的过程，而被赋予此类名的选择器则指定了该动画的具体参数设置，如循环次数、速度和平滑度等特性。