text-fill-color加text-stroke实现页面艺术字

语法：

text-fill-color：<color>

text-fill-color会覆盖color所定义的字体颜色：

代码

text-fill-color:#f00;
color:#000;

效果

如果你的浏览器支持text-fill-color，将看到我是红色

* 在webkit下你将看到红色的文字

text-fill-color打造镂空文字：

代码

-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px #000;

效果

未定义text-stroke-color的文字

text-stroke-color透明值让文字更柔和：

代码

background-image:-webkit-linear-gradient(#eee,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

效果1

Gradient图像填充的文字

代码

background-image:-webkit-linear-gradient(#eee,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px transparent;

效果2

Gradient图像填充的文字

* 对比你会发现效果2中的文字比效果1更柔和一点

备注：text-fill-color 与 color 有一点不同，当你设置 color 时，输入光标也会跟着变化；而 text-fill-color 只是文字变化，光标不变。