顾名思义“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>

待续...