最近浏览b站，偶然发现一个有趣的前端小实验-----边框发光效果。 原视频地址，但是没有教学视频，特此研究一下。
制作一个发光的边框
先制作一个盒子，利用盒子的伪元素before和after制作发光效果。
- 创建伪元素before和after,并利用定位调整到盒子的下面。
- 将盒子背景和body背景调暗，此时我们获得的一个白色的边框
- 一个伪元素负责产生白色边框，另一个伪元素添加滤镜模糊化。
- 把文字的颜色改成白色，给两个伪元素添加三色颜色渐变，中间色与背景色相同，随着颜色渐变中间部分隐入背景，形成边缘发光效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #060c21;
font-family: 'Poppins', sans-serif;
}
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background: #060c21;
}
/*一个溢出的盒子作为边框，添加背景后形成光源效果*/
.box::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #ffffff;
z-index: -1; /*元素堆叠顺序*/
}
/*另一个溢出的盒子，模糊形成光晕效果*/
.box::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #ffffff;
z-index: -2;
/*添加模糊滤镜*/
filter: blur(40px);
}
.box::before,
.box::after {
/*三色渐变，中间为背景色，融入背景*/
background: linear-gradient(235deg, #89ff00, #060c21, #00bcd4);
}
.content {
padding: 20px;
box-sizing: border-box;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h1>黑洞</h1>
<p>
黑洞是现代广义相对论中，宇宙空间内存在的一种天体。黑洞的引力很大，使得视界内的逃逸速度大于光速。 “黑洞是时空曲率大到光都无法从其事件视界逃脱的天体”。 如果将大量物质集中于空间一点，其周围会产生奇异的现象，即在质点周围存在一个界面——“视界”一旦进入这个界面， 即使光也无法逃脱。这种“不可思议的天体”被美国物理学家约翰·阿奇博尔德·惠勒命名为“黑洞”。
</p>
</div>
</div>
</body>
</html>
