首页 > 建站教程 > CSS3+HTML5 >  text-fill-color详解正文

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;
 }
效果如下: