css text-fill-color與text-stroke講解

顧名思義“text-fill-color”就是文字填充顏色而“text-stroke”就是文字描邊。還別說，兩個屬性可以制作出各種炫酷的文字效果，不過IE系列都不支持，不過好在webkit都支持良好。

text-fill-color:color;

<style>
	h1{
		-webkit-text-fill-color:red;
	}
</style>
<h1>博客園</h1>

話說倒有點像color了，這種情況下倒是和color真的是一樣的。

得注意一下：如果同時設置了text-fill-color和color那么color不會起作用。

h1{
	-webkit-text-fill-color:red;
	color:green;
}

text-stroke:width color;

<style>
	h1{
		-webkit-text-stroke:1px red;
	}
</style>
<h1>博客園</h1>

好像這兩個單獨使用沒有啥亮點，但如果結合起來使用那就不一樣了。

text-stroke + text-fill-color制作文字鏤空效果

<style>
	body{
		background-color:#000;
	}
	h1{
		font-size:60px;
		-webkit-text-fill-color:transparent;
		-webkit-text-stroke:1px #fff;
	}
</style>
<h1>博客園</h1>

原來就是設置邊框為白色然后然文字顏色透明，背景顏色黑色，也就是黑白對比，自然文字就只能看見邊框了。

如果再結合一下“background-clip”那就更強大了。

background-clip:text結合text-fill-color制作文字漸變效果

h1{
	font-size:60px;
	background: linear-gradient(to bottom,#FCF,#000);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}

注意:background-clip必須放在background后面不然不起作用，之所以要用background是因為text-fill-color不能使用linear所以只好借助background了。

background-clip:text會將背景作為文字區域裁剪。

<style>
	h1{
		font-size:60px;
		background: url(bg.jpg) repeat;
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
	}
</style>
<h1>博客園</h1>

利用animation制作文字遮罩動畫效果

<style>
	h1{
		font-size:60px;
		background: url(bg.jpg) repeat;
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
		animation:fn 5s alternate infinite;
	}
	@keyframes fn{
			0%{
				background-position:0px 0px;
			}
			20%{
				background-position:30% 0px;
			}
			50%{
				background-position:50% 0px;
			}
			70%{
				background-position:70% 0px;
			}
			100%{
				background-position:100% 0px;
			}
	}
</style>
<h1>博客園</h1>

待續...