text-fill-color详解

今天我爱模板网在做一个项目时，给input设置color发现无效。用谷歌调试工具发现，这个input-webkit-text-fill-color:#888 发现把这个样式注释了就有效果了。
百度了下这个样式，发现它的优先级比color要高，如果设置了这个属性，color属性将被覆盖。而且，给placeholder设置颜色，也不行。做了这么多年的前端，第一次知道这个样式。除了这个样式，还有-webkit-text-stroke，这个也比较少用。但是，有时候也比较有用。下面是转载自csdn的一篇文章，利用这两个属性，配合background-image: -webkit-linear-gradient，制作的渐变文字、镂空文字效果：

渐变色字体
HTML代码

<p class="font1">你好，这是我的渐变色字体</p>

CSS代码

.font1{
  font-size:22px;
   background-image: -webkit-linear-gradient(bottom, rgb(201, 21, 134), rgb(20, 11, 255));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

效果如下：

镂空字体
HTML代码

<p class="font1">你好，这是我的镂空字体</p>

CSS代码

.font1{
  font-size:32px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke:1px #000;
 }

效果如下：


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！