2、css3 text-fill-color与text-stroke讲解-优快云博客

本文介绍了CSS3中text-fill-color和text-stroke属性的应用，通过实例展示了如何制作文字镂空及渐变效果，并提供了实现这些效果的代码片段。

最近看了一下css3，学习了一下新的属性，这个两个属性比较让我挺喜欢的，其中

text-fill-color:就是文字填充颜色而;

text-stroke:就是文字描边,两个属性可以制作出各种炫酷的文字效果，不过IE系列都不支持，不过好在webkit都支持良好

注意：如果同时设置了text-fill-color和color那么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: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了。

这个介绍的不错：http://www.cnblogs.com/pssp/p/5908397.html

转载于:https://www.cnblogs.com/a-flower-clover/p/7078995.html