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>
待续...