zikkeung/渐变文字

## 渐变文字
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		p{
			font-size:20px;
			background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	</style>
</head>
<body>
	<p>此效果仅限于webkit内核，先设置background-image为渐变的颜色，然后设置-webkit-background-clip为text，最后设置填充颜色为透明即-webkit-text-fill-color: transparent;</p>
</body>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
	p{
	font-size:20px;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	</style>
	</head>
	<body>
	<p>此效果仅限于webkit内核，先设置background-image为渐变的颜色，然后设置-webkit-background-clip为text，最后设置填充颜色为透明即-webkit-text-fill-color: transparent;</p>
	</body>
	</body>
	</html>