【我不熟悉的css 】01. 文字设置渐变色

最新推荐文章于 2024-07-01 15:53:36 发布

我有一棵树

最新推荐文章于 2024-07-01 15:53:36 发布

阅读量161

点赞数

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_17335549/article/details/126592566

版权

css 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

方法一

.text {
    background: linear-gradient(317.23deg, #DE2929 3.6%, #E33E75 39.75%, #E64CA8 71.38%, #D461D7 100%), #000000;
    // 设置元素的背景（图片或颜色）是否延伸到border、padding,content下面
    -webkit-background-clip: text; 
    // 只有设置了这个才显示渐变色
    color: transparent;
}

方法二

参考简单说通过CSS实现文字渐变色的两种方式 - SegmentFault 思否说明这次的重点就在于两个属性， background 属性 mask 属性这两个属性分别是两种实现方式的关键。解释方式一效果图代码 {代码...} 代码不多，我们来看...https://segmentfault.com/a/1190000011882933

    <!-- 注意这text属性一定要写，要不css中取不到 -->
    <div class="text2" text="方法2有渐变色的字体"></div>

.text2 {
    position: relative;
    color: yellow;
    
}
.text2::before {
    content: attr(text);
    position: absolute;
    z-index: 10;
    color: pink;
    -webkit-mask: linear-gradient(to left, red, transparent );
}