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>《活著》是作家余華的代表作之一，講述了在大時(shí)代背景下，隨著內(nèi)戰(zhàn)、三反五反，大躍進(jìn)，文化大革命等社會(huì)變革，徐福貴的人生和家庭不斷經(jīng)受著苦難，到了最后所有親人都先后離他而去，僅剩下年老的他和一頭老牛相依為命。
</p>
</div>
</div>
</body>
</html>
linear-gradient
CSS linear-gradient() 函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。其結(jié)果屬于<gradient>數(shù)據(jù)類型，是一種特別的<image>數(shù)據(jù)類型。
/* 漸變軸為45度，從藍(lán)色漸變到紅色 /
linear-gradient(45deg, blue, red);
/ 從右下到左上、從藍(lán)色漸變到紅色 /
linear-gradient(to left top, blue, red);
/ 從下到上，從藍(lán)色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結(jié)束 */
linear-gradient(0deg, blue, green 40%, red);
提示：利用repeating-linear-gradient函數(shù)可以實(shí)現(xiàn)線形重復(fù)漸變效果。
提示：由于<gradient>數(shù)據(jù)類型系<image>的子數(shù)據(jù)類型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不適用于[background-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color "CSS屬性中的 background-color 會(huì)設(shè)置元素的背景色, 屬性的值為顏色值或關(guān)鍵字"transparent"二者選其一.")以及類似的使用 <color>數(shù)據(jù)類型的屬性中。
filter
filter CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。
學(xué)習(xí)地址：
http://www.itdecent.cn/p/c501fee6fb68
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
