CSS3实现渐变文字的三种方案

最新推荐文章于 2024-07-25 12:38:27 发布

我的小英短

最新推荐文章于 2024-07-25 12:38:27 发布

阅读量3.4k

点赞数

分类专栏：前端框架 svg 文章标签： svg css html

本文链接：https://blog.csdn.net/WU5229485/article/details/81874183

版权

本文介绍了使用CSS3实现渐变文字的三种方法：1) 通过`background-clip`和`text-fill-color`；2) 使用`mask-image`；3) 结合`linearGradient`和`fill`。CSS3使得前端开发者可以方便地创建出与设计图相符的渐变文字效果。

摘要由CSDN通过智能技术生成

在开发过程中，UI设计师经常会设计一些带渐变文字的设计图，给到我们程序员，而我们程序员们呢，大多都是默默地叹息传来，不过CSS3的诞生，解决了前端开发过程中的好多个难题，比如动画，遮罩等等

1. 我们今天要实现的就是使用纯CSS实现渐变文字，下面是预览图片：

2. 基础样式：

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

3. 第一种方法，使用 background-cli、 text-fill-color：

.gradient-text-one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

4. 第二种方法，使用 mask-image：

.gradient-text-two{
   color:red;
}
.gradient-text-two[data-content]::after{
    content:attr(data-content);
    display: block;
    position:absolute;
    color:yellow;
    left:0;
    top:0;
    z-index:2;
    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}

5.第三种方法，使用 linearGradient、fill：