正在加载中

最后更新于 2018年04月11日

暂时还是需要加前缀才可以生效,而且只支持webkit,个人测试电脑端新的浏览器都是可以支持的,除了ie不行,手机端我测试了安卓7.0和火狐浏览器,都是可以显示的,所以日常用一用还是可以的!

效果图:

css3文字渐变

代码:

-webkit-text-fill-color: transparent;
background:linear-gradient(to bottom,#666 50%, #aaa 50%);
-webkit-background-clip:text;

注意:

原理是通过设置文字填充为透明,然后让背景色渐变显示到文字中,background-clip:text将渐变展示为文本大小。

由于这个属性暂时只支持-webkit-,所以按道理来讲,我们设置渐变的时候也是要加上-webkit-前缀,但是由于浏览器已经都支持了,前缀被取消了,所以你加了前缀反倒没有效果,这个地方要注意下。

"原版:background:-webkit-linear-gradient(to bottom,#666 50%, #aaa 50%);"

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao

登录