003.荧光边框

效果图 §

演示地址 §

http://jsrun.net/4rXKp

HTML 代码 §

<div class="box">
  <div class="content">
    <h1>Glowing Border</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quos molestias praesentium iste! sit amet consectetur adipisicing elit. Tenetur soluta, aperiam animi dolorem harum rerum. Cumque dignissimos hic doloremque atque, eveniet soluta alias culpa quod maiores dolore odit iusto. Eos.</p>
  </div>
</div>

CSS 代码 §

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #060c21;
  font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  line-height: 1.5;
}
.box {
  position: relative;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #060c21;
}
.box::before, .box::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  z-index: -1;
  background: linear-gradient(235deg, #89ff00, #060c21, #00bcd4); /* 线性渐变 */
}
.box::after {
  filter: blur(30px); /* 滤镜：高斯模糊 */
}
.content {
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
}