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>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient "<gradient> 数据类型由下列函数定义。")数据类型，是一种特别的[`<image>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/image "CSS的数据类型描述的是2D图形。在CSS中有两种类型的图像：简单的静态图像，经常被一个在使用的URL引用，动态生成的图像，比如DOM树的部分元素样式渐变或者计算样式产生。")数据类型。
> /* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
**提示：**利用[`repeating-linear-gradient`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-linear-gradient "CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的<image>， 这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个<gradient> 数据类型的对象, 这是一个特殊的<image>类型。")函数可以实现线形重复渐变效果。
**提示：**由于`<gradient>`数据类型系`<image>`的子数据类型，`<gradient>`只能被用于`<image>`可以使用的地方。因此，`linear-gradient()` 并不适用于[`background-color`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color "CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.")以及类似的使用 [`<color>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value "CSS 数据类型 <color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述：")数据类型的属性中。
#### filter
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
学习地址：
[https://www.jianshu.com/p/c501fee6fb68](https://www.jianshu.com/p/c501fee6fb68)
[https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient)
