text-fill-color是甚么意思呢？单是从字面上看来便是“文字填充色调”,但是它具体也是设定目标汉语字的填充色调，和color的实际效果很类似。假如另外设定text-fill-color和color两个特性，则text-fill-color会遮盖掉color的值。
因为text-fill-color是css3的新特性，1说到css3新特性，大伙儿毫无疑问就会问适配实际效果怎样呢？？嘿嘿，只能绝不留情的说，适配性很差呀，，只可用于webkit核心的访问器合理果。。很可是啊！！但是它尽管适配性差，可是却能够制做很酷炫的文本实际效果，例如说流光文本，镂空文本这些。
制做流光文本，单是应用text-fill-color但是不好呀，还必须融合css3的animation来完成动漫实际效果.下面立即上编码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
._borderWrap{
width: 180px;
height: 150px;
position: absolute;
left: 23%;
top: 25%;
}
._border{
line-height: 145px;
text-align: center;
font-size: 40px;
font-weight: bolder;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
background-size: 200%,100%;
-webkit-background-clip: text;
-webkit-animation: word 5s linear infinite ;
}
@keyframes word {
0%{background-position: 0 0}
100%{background-position: ⑴00% 0}
}
</style>
</head>
<body>
<div class="_borderWrap">
<div class="_border">你的姓名</div>
</div>
</body>
</html>
实际效果图：
“你的姓名”便是制做的流光文本，只但是截图是静态数据的，想看动态性实际效果必须自身运作编码哟！
留意，制做流光文本有几个关键点：text-fill-color1般设定为transparent（全透明色），随后运用background-image和渐变色色调来设定文本的情况色，运用background-clip来完成文本的截取，再运用background-size设定扩张情况，已使应用animation的情况下能做到动漫的实际效果等。
总结
以上所述是网编给大伙儿详细介绍的css3中 text-fill-color特性,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！
Copyright © 2002-2020 凡科自助建站_企业网站怎么建设_智能建站系统_自己建个网站_搭建网站基本步骤 版权所有 （网站地图） 粤ICP备10235580号