zoukankan      html  css  js  c++  java
  • css3背景渐变色代码

    从上到下
    #grad {
      background: -webkit-linear-gradient(red, blue);
      background: -o-linear-gradient(red, blue);
      background: -moz-linear-gradient(red, blue);
      background: linear-gradient(red, blue);
    }
    从左到右
    #grad {
      background: -webkit-linear-gradient(left, red , blue);
      background: -o-linear-gradient(right, red, blue);
      background: -moz-linear-gradient(right, red, blue);
      background: linear-gradient(to right, red , blue);
    }
    从左上到右下
    #grad {
      background: -webkit-linear-gradient(left top, red , blue);
      background: -o-linear-gradient(bottom right, red, blue);
      background: -moz-linear-gradient(bottom right, red, blue);
      background: linear-gradient(to bottom right, red , blue);
    }
    使用角度
    #grad {
      background: -webkit-linear-gradient(180deg, red, blue);
      background: -o-linear-gradient(180deg, red, blue);
      background: -moz-linear-gradient(180deg, red, blue);
      background: linear-gradient(180deg, red, blue);
    }
    多种颜色节点
    #grad {
     
      background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
     
      background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
     
      background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
     
      background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
    }
    使用透明度
    #grad {
      background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
      background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
      background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
      background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    }
    径向渐变
    #grad {
      background: -webkit-radial-gradient(red, green, blue);
      background: -o-radial-gradient(red, green, blue);
      background: -moz-radial-gradient(red, green, blue);
      background: radial-gradient(red, green, blue);
    }
    形状为圆形的径向渐变

    #grad {
      background: -webkit-radial-gradient(circle, red, yellow, green);
      background: -o-radial-gradient(circle, red, yellow, green);
      background: -moz-radial-gradient(circle, red, yellow, green);
      background: radial-gradient(circle, red, yellow, green);
    }

    颜色不均匀的径向渐变

    #grad {
      background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
      background: -o-radial-gradient(red 5%, green 15%, blue 60%);
      background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
      background: radial-gradient(red 5%, green 15%, blue 60%);
    }

     
  • 相关阅读:
    平台升级至spring 4.3.0 运行稳定
    java过滤特殊字符的正则表达式
    xheditor-文件上传-java-支持html5-application/octet-stream
    java用正则方法验证文件名是否合法
    Java实现在线预览Word,Excel,Ppt文档
    为什么用freemarker视图?
    Java中判断String不为空的问题性能比较
    解决org.apache.velocity.exception.ResourceNotFoundException: Unable to find resource
    Java Swing 使用非本地字体
    第三方包jintellitype实现Java设置全局热键
  • 原文地址:https://www.cnblogs.com/dej-11/p/7837332.html
Copyright © 2011-2022 走看看