css字体渐变

一、伪代码:

<div class="test">------></div>	
<style>
   .test{
        background-image:-webkit-linear-gradient(left, red, pink);//开始方向,渐变颜色
    -webkit-background-clip:text;//以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉。
	-webkit-text-fill-color:transparent;//把文字变透明
    }
</style>

首先:给外层div(就是装着"----->"的div盒子)来一个背景渐变。
其次:用webkit-background-clip: text;以外层div的文字作为裁剪区域向外裁剪;
最后:把文字变透明,可以用rgba给文本填充透明颜色或者直接设置color: transparent;

二、效果:

三、参考:

​css3 文字横向渐变,CSS3实现渐变文字效果_Gold RIch Money的博客-CSDN博客

CSS3利用-webkit-background-clip: text;实现文字渐变效果_I俩月亮的博客-CSDN博客_webkit-background-clip

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值