<!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. Servlet&jsp基础：第五部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. [SAP ABAP开发技术总结]增强Enhancement

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. Threejs 使用的3D格式

    3D格式你可以通过任意软件导出(.3ds,dae等),但是threejs 无法使用, 1,http://www.blender.org/ 下载这款开源的3d软件 2,https://github.co ...

  4. git原理图解

    本文背景,在实际项目中使用git已有一年,发现不少同事虽然会使用常用git指令,但并不理解每个指令对应的作用原理.今天静下心总结下git 的基本理解:代码的存在区域:本文以实际项目出发,理清使用git ...

  5. Spring JDBC主从数据库配置

    通过昨天学习的自定义配置注释的知识,探索了解一下web主从数据库的配置: 背景:主从数据库:主要是数据上的读写分离: 数据库的读写分离的好处? 1. 将读操作和写操作分离到不同的数据库上,避免主服务器 ...

  6. poj1819Disks

    链接 题意:从左到右按顺序给你n个圆的半径,把左右两边想象成两堵墙的话,就是左右两边向里挤压,问哪些圆是对最后的宽度不影响. 刚开始理解错了,..以为怎么放圆使宽度最小.. 这样就可以尽量使每个圆向左 ...

  7. hibernate Criteria查询多对多（Set集合）条件筛选

    PO public class UserPO implements java.io.Serializable { /** 用户唯一标识ID */ private String id; /** 状态(在 ...

  8. ref、out

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ref_ ...

  9. extern 关键字

    1 http://baike.baidu.com/view/963932.htm?fr=ala0_1_1 extern可置于变量或者函数前,以表示变量或者函数的定义在别的文件中,提示编译器遇到此变量和 ...

  10. JavaScript 返回值

    Window.Open()返回值: 利用window.open(‘NewWindow.html’):打开新的窗口NewWindow.html后,如果有返回值需要处理,应通过window.opener. ...