zoukankan      html  css  js  c++  java
  • css3渐变之linear-gradient与-webkit-linear-gradient写法异同

    语法
    background: linear-gradient(direction, color-stop1, color-stop2, ...);

    通常只需要linear-gradient,兼容性较好。但iphone5的ios6系统下,linear-gradient不识别,需要加上-webkit-linear-gradient。

    linear-gradient和-webkit-linear-gradient的用法是有很大区别的,千万别以为只是多了一个-webkit。
    主要是第一个参数direction。前者需要使用“to bottom”,而后者是“bottom”,不能加“to”:
    .im-item .im-mask {
    background:linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
    background:-webkit-linear-gradient(bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
    }

    使用角度时也不一样,前者0deg表示从下到上,而后者0deg表示从左到右。如:
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));

    如果第一个参数省略,那么两者都表示从上到下,这点倒是相同:
    background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));

  • 相关阅读:
    .NET Tools...
    函数重载
    友元课后题
    怎么防止用户输入错误信息
    C#动态求圆的面积
    重载自增
    C++数学应用
    位运算符
    MSDN放出了VS2010简体中文正式版(附下载地址)
    字符串复制
  • 原文地址:https://www.cnblogs.com/hz-blog/p/5142139.html
Copyright © 2011-2022 走看看