zoukankan      html  css  js  c++  java
  • CSS样式渐变代码,兼容IE8

    background: -webkit-linear-gradient(top,#ffffff,#f5f5f5);
        background: -moz-linear-gradient(top,#ffffff,#f5f5f5);
        background: -webkit-gradient(linear, top, bottom,from(#ffffff),to(#f5f5f5));
        background: linear-gradient(top,#ffffff,#f5f5f5);
        background: -ms-linear-gradient(top,#ffffff,#f5f5f5);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#f5f5f5);
    
    
    左右:
    
    background: -webkit-linear-gradient(left,#41caf4,#5399f6);
        background: -moz-linear-gradient(left,#41caf4,#5399f6);
        background: -webkit-gradient(linear,left top,right top,from(#41caf4),to(#5399f6));
        background: linear-gradient(left,#41caf4,#5399f6);
        background: -ms-linear-gradient(left,#41caf4,#5399f6);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#41caf4, endColorstr=#5399f6);
    
    相关说明:
    上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
    其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。
    
    filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
    其中各个参数的含义如下:
    opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
    finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
    style用来指定透明区域的形状特征:
    0 代表统一形状
    1 代表线形
    2 代表放射状
    3 代表矩形。
    startx 渐变透明效果开始处的 X坐标。
    starty 渐变透明效果开始处的 Y坐标。
    finishx 渐变透明效果结束处的 X坐标。
    finishy 渐变透明效果结束处的 Y坐标。
    
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
        -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/	
        background:red; /* 一些不支持背景渐变的浏览器 */  
        background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
        background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
    

      

  • 相关阅读:
    Nginx upstream的5种权重分配方式分享
    MySQL——约束(constraint)详解---转载
    analysis简介 --转载
    软件测试工具LoadRunner中如何定义SLA?--转载
    jemeter如何设置用户取参数唯一不重复---------转载
    loadrunner中web_reg_find函数的用法及测试脚本实例
    LoadRunner中将中文转换为URL编码类型的方法
    LoadRunner字符串编码转换函数:lr_convert_string_encoding
    Loadrunner模拟JSON接口请求进行测试
    http请求数据的方式以及格式
  • 原文地址:https://www.cnblogs.com/janfu/p/8058736.html
Copyright © 2011-2022 走看看