码迷,mamicode.com
首页 > 其他好文 > 详细

字体渐变

时间:2019-01-05 19:49:22      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:die   div   元素   css   parent   效果   color   ack   .com   

主要用到css3中的gradient这个属性

background: linear-gradient(direction, color-stop1, color-stop2, ...);  

但这是用用背景,如果要让字体也有渐变效果需要加写修饰

span{
    font-size: 20px;
    background-image: -webkit-linear-gradient(right,red,blue);
    background-image: linear-gradient(to right,red,blue);
    -webkit-background-clip:text;
    color: transparent;
}

技术分享图片

background-clip规定背景的绘制区域

技术分享图片

所以在上面-webkit-background-clip:text就是被剪裁到字体,然后给字体设置为透明。
需要注意的是字体需要是行内元素,如果是块元素就要给块元素加上实际字体所占的宽度。

字体渐变

标签:die   div   元素   css   parent   效果   color   ack   .com   

原文地址:https://www.cnblogs.com/mychz/p/10225556.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!