zoukankan      html  css  js  c++  java
  • css设置字体渐变色

    参考  https://www.cnblogs.com/ypppt/p/13334613.html

    我设置的第一种

      1. background: linear-gradient(to right, redblue);
      2. -webkit-background-clip: text;
      3. color: transparent;

    网上说的

    .gradient-text-one{ 

        background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
    background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
    webkit-text-fill-color: transparent 使用透明颜色填充文本。 
    webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。
     
    第二种
    .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)));
    }
    mask-image 和 background-image 一样,不仅可以取值是 图片路径,也可以是渐变色。  
     
     
  • 相关阅读:
    java @param参数注解
    java 泛型类
    HttpServletRequestWrapper的使用
    java工具类系列 (四.SerializationUtils)
    spring aop通过joinpoint传递参数
    java retention注解
    stringUtils是apache下的Java jar补充包
    slf4j日志系统
    支付宝支付接口开发
    wifi定位原理
  • 原文地址:https://www.cnblogs.com/wdd-cindy/p/14865523.html
Copyright © 2011-2022 走看看