<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。
        GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。*/
        div {
        margin-bottom:10px;
        border:2px solid #000;
         width:200px;
        height:100px;
        float:left;
        margin-right:10px;
        }
        .box {
        width:200px;
        height:100px;
        background:-moz-linear-gradient(left,#000,#f00);
         background:-webkit-gradient(linear,left top,right bottom,from(#000),to(#f00));
        background:-webkit-linear-gradient(left,#000,#f00);
        background:-o-linear-gradient(left,#000,#f00);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#f00, endColorstr=#000);/*IE<9>*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#f00, endColorstr=#000)";/*IE8+*/
     
        }
        /*1、开始于center（水平方向）和top（垂直方向）也就是Top → Bottom：*/
        .box1 {
          width:200px;
        height:100px;
        /*background:-webkit-linear-gradient(top,#ffffc7,#019934);*/
          background:-moz-linear-gradient(top,#ffffc7,#019934);
        background:-webkit-gradient(linear,top,from(#ffffc7),to(#019934));
        background:-webkit-linear-gradient(top,#ffffc7,#019934);
          background:-o-linear-gradient(top,#ffffc7,#019934);
            background:linear-gradient(top,#ffffc7,#019934);
        }
        /*3、起始于left（水平方向）和top（垂直方向）:*/
        .box3 {
          width:200px;
        height:100px;
        background:-moz-linear-gradient(left top,#cd0069,#009997);
        background:-webkit-linear-gradient(left top,#cd0069,#009997);
        background:-o-linear-gradient(left top,#cd0069,#009997);
        background:linear-gradient(left top,#cd0069,#009997);
        }
        /*with Specified Arbitrary Stops：*/
        .box5 {
         width:200px;
        height:100px;
         background:-moz-linear-gradient(left,#ace,#f96,#ace,#f96);
        /*background:-webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);*/
        background:-webkit-gradient(linear,left top,right bottom,from(#ace),color-stop(0.25,#f96),color-stop(0.5,#ace),color-stop(0.75,#f96),to(#ace));
        background:-o-linear-gradient(left,#ace,#f96,#ace,#f96);
         background:linear-gradient(left,#ace,#f96,#ace,#f96)
        }
        /*6、角度(Angle)：
        正如上面看到的示例，如果您不指定一个角度，它会根据起始位置自动定义。
        如果你想更多的控制渐变的方向，您不妨设置角度试试。例如，下面的两个渐
        变具有相同的起点left center，但是加上一个30度的角度。*/

.deg0 {
  background: -moz-linear-gradient(0deg, #ace, #f96);
  background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(0deg, #ace, #f96);
  background: -o-linear-gradient(0deg, #ace, #f96);
}
   
.deg45 {
  background: -moz-linear-gradient(45deg, #ace, #f96);
  background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(45deg, #ace, #f96);
  background: -o-linear-gradient(45deg, #ace, #f96);
}
.deg90 {
  background: -moz-linear-gradient(90deg, #ace, #f96);
  background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(90deg, #ace, #f96);
  background: -o-linear-gradient(90deg, #ace, #f96);
}
.deg135 {
  background: -moz-linear-gradient(135deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
  background: -webkit-linear-gradient(135deg, #ace, #f96);
  background: -o-linear-gradient(135deg, #ace, #f96);
}
.deg180 {
  background: -moz-linear-gradient(180deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(180deg, #ace, #f96);
  background: -o-linear-gradient(180deg, #ace, #f96);
}

.deg360 {
  background: -moz-linear-gradient(360deg, #ace, #f96);
  background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(360deg, #ace, #f96);
  background: -o-linear-gradient(360deg, #ace, #f96);
}

.imgs {
            width:200px;
            height:100px;
        background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);

}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box3"></div>
    <div class="box5"></div>
  
    <div class="deg0">deg0</div>
     <div class="deg45">deg45</div>
     <div class="deg90">deg90</div>
     <div class="deg135">deg135</div>
     <div class="deg180">deg180</div>
     <div class="deg360">deg360</div>

<div class="imgs">pics</div>

</body>
</html>

线性渐变--linear-gradient的更多相关文章

  1. CSS3之线性渐变（linear gradients）

    线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变. 语法: background:linear-gradient(direction,color-stop ...

  2. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  3. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  4. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  5. CSS3 Gradient线性渐变

    废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...

  6. 【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...

  7. [转]ebkit内核浏览器的Linear Gradients (线性渐变)

    转自:http://www.css88.com/archives/tag/webkit-gradient webkit内核的safari. Chrome的Linear Gradients (线性渐变) ...

  8. 深入理解CSS3 gradient斜向线性渐变——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...

  9. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  10. CSS3 线性渐变（linear-gradient） 兼容IE8,IE9

    一.线性渐变在 Mozilla 下的应用     语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...

随机推荐

  1. 服务器端验证--验证框架验证required.

    struts2表单验证里field-validator type值一共可以取哪些?都什么含义? int 整数:double 实数:date 日期:expression 两数的关系比较: email E ...

  2. Metasploit辅助模块

    msf > show auxiliary Auxiliary ========= Name                                                  Di ...

  3. implement Google's Open Source Slam "Cartographer" demos in ROS/rviz

    Cartographer is a backpack equipped with Simultaneous Localization and Mapping (SLAM) technology. 1. ...

  4. Redis配置文件之————redis.conf配置及说明

    基本设置 1. 备释当配置中需要配置内存大小时,可以使用 1k, 5GB, 4M 等类似的格式,其转换方式如下(不区分大小写):1k =< 1000 bytes1kb =< 1024 by ...

  5. 适应各浏览器图片裁剪无刷新上传jQuery插件（转）

    看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...

  6. 【linux】设置 tomcat 开机启动

    方法一: linux 下tomcat开机自启动修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/usr/java/j2sdk1.4.2_08 export CL ...

  7. MySQL在windows系统中修改datadir路径后无法启动问题，报错1067

    windows server2008下如何更改MySQL数据库的目录的帖子已经很多了,这里简单介绍一个步骤,如果不成功请先查看其它帖子. 更改默认的mysql数据库目录 将 C:\Documents ...

  8. Js_动画显示背景图片

    jAni是一个可以动画显示背景图片的jQuery插件.这个插件基本上是GIF动画的一个替代品,但是他有他的好处.所有浏览器都支持GIF形式的动画格式,而且也不需要额外的javaScript代码和标记. ...

  9. hiho_1059_string matching content length

    题目大意 两个字符串strA和strB(长度最大为2100),他们中按照顺序有一些公共的子串,且公共子串的长度大于等于3,否则不认为是合法的,比如 abcdef 和 abcxcdef, 按照顺序有合法 ...

  10. php 新特性

    PHP 5.6 1.可以使用表达式定义常量 https://php.net/manual/zh/migration56.new-features.php 在之前的 PHP 版本中,必须使用静态值来定义 ...