Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{padding:0;margin:0;font-family:'Poppins',sans-serif;display:flex;justify-content:center;align-items:center;
min-height:100vh;background:#060c21;}
.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:#fff;z-index: -1;}
.box:after{content:'';position:absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background:#fff;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:#ffffff;}
h1{margin: 0px;padding: 0px;}
h3{margin: 15px auto 0px; padding: 0px;}
p{text-indent:2em;}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h1>活着</h1>
<h3>（余华著长篇小说）</h3>
<p>《活着》是作家余华的代表作之一，讲述了在大时代背景下，随着内战、三反五反，大跃进，文化大革命等社会变革，徐福贵的人生和家庭不断经受着苦难，到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。
</p>
</div>
</div>
</body>
</html>
linear-gradient
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。
/* 渐变轴为45度，从蓝色渐变到红色 /
linear-gradient(45deg, blue, red);
/ 从右下到左上、从蓝色渐变到红色 /
linear-gradient(to left top, blue, red);
/ 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
提示：利用repeating-linear-gradient函数可以实现线形重复渐变效果。
提示：由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于[background-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color "CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.")以及类似的使用 <color>数据类型的属性中。
filter
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
学习地址：
https://www.jianshu.com/p/c501fee6fb68
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
