zoukankan      html  css  js  c++  java
  • CSS3j背景渐变,字体颜色渐变,以及兼容IE写法

    一、背景渐变

    #grad {
    
      background: linear-gradient(red, blue);
    
     }

    渐变路径默认是从上到下,也可以指定路径:

    //从左到右
    
    #grad {
    
    background: linear-gradient(to right, red , blue);
    
    }
    
    //从左上角到右下角
    
    #grad {
    
       background: linear-gradient(to bottom right, red , blue);
    
     }
    

      

      注:低版本IE不支持css3的渐变,可以通过滤镜来实现渐变效果

    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 
    参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平
    

      

     

    二、文字渐变

      HTML代码:
    <h2 class="text-gradient">文字渐变</h2>

    第一种方法:
    span {
      background: linear-gradient(to right, red, blue);
      -webkit-background-clip: text;
    
      background-clip: text;
      color: transparent;
    }

      第二种方法:

    .text-gradient {  
        display: inline-block;
        color: green;
        font-size: 10em;
        font-family: '微软雅黑';
        background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    };
  • 相关阅读:
    隔离级别 && SNAPSHOT
    多态性&& 虚函数 && 抽象类
    socket编程
    [APIO2015]巴邻旁之桥
    LuoguP3701 「伪模板」主席树
    线段树标记永久化
    [HNOI2015]开店
    NOIP2017划水记
    FFTNTT总结
    [THUWC 2017]在美妙的数学王国中畅游
  • 原文地址:https://www.cnblogs.com/webwangjie/p/10001482.html
Copyright © 2011-2022 走看看