字型顏色漸變

字型顏色漸變

這裡有幾個知識點：

1.content屬性的值除了使用文字之外，還可以直接訪問讀取標籤的一些屬性值。使用的方法是： attr();

2. -webkit-mask 主要是用來給一個元素新增一個蒙版。蒙版可以是透明的png圖片也可以是CSS3的漸變效果。

<h1 class="" text="字型顏色漸變">
		字型顏色漸變
	</h1>

	<h1 class="beauty-font" text="字型顏色漸變">
		字型顏色漸變
	</h1>
	<style>
		h1,.beauty-font {
			/*display: inline-block;*/
			font-size: 80px;
			position: relative;
			color: red;
			margin-bottom: 100px;
		}
		.beauty-font:after {
			content: attr(text);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			color: black;
			opacity: 0.5;
			-webkit-mask: -webkit-gradient(
                linear,
                left top,
                right top,
                from(rgba(0,0,0,0.1)),
                to(rgba(0,0,0,1)));
    		);
		}
		.beauty-font:before {
			content: attr(text);
			position: absolute;
			top: -100px;
			left: 0;
			z-index: 2;
			color: black;
			opacity: 0.5;
			-webkit-mask: -webkit-gradient(
                linear,
                left top,
                right top,
                from(rgba(0,0,0,0.1)),
                to(rgba(0,0,0,1)));
    		);
		}
	</style>