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