<!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. 读取视屏文件，保存帧图片为ppm文件

    ffmpeg跟sdl的学习过程:一.版本信息:ffmpeg-3.0.2.tar.bz2SDL2-2.0.4.tar.gz二.编译过程:1.ffmgeg的编译:./configure --enable- ...

  2. CUBRID学习笔记 27 数据类型4

    范围比较 数字和字符串比较 字符串被转为double SELECT i FROM t WHERE i <= all {'11','12'}; i ============= 1 2 3 4 字符 ...

  3. react入门笔记

    this.props.children是任何内嵌的元素 利用ref属性给子组件命名,this.refs引用组件,getDOMNode()获取本地的DOM元素,如: this.refs.author.g ...

  4. FLASH CC 2015 CANVAS （七）总结

    FLASH CC 2015 CANVAS (一至七)确切来说是自己在摸索学习过程中而写.所以定为“开荒教程”. 去年年底转战H5,半年中一直非常忙也不敢用CC来做项目,担心有BUG或者无法实现需求,所 ...

  5. 保存会话数据——session学习

    Session:Session是服务器端技术,利用这个技术,服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象,由于session为用户浏览器独享,所以用户在访问服务器的web资 ...

  6. 十种JAVA排序算法实例

    一.冒泡(Bubble)排序 复制代码 代码如下: void BubbleSortArray() {       for(int i=1;i<n;i++)       {         for ...

  7. Broadcast Receviewer

    使用Braodcast Receiver 一.新建一个空的工程,命名为LearnBroadcastReceiver 二.为主界面添加一个按钮 三.新建一个broadcast receiver,命名为M ...

  8. OpenGL的glViewPort窗口设置函数实现分屏

    之前实现过全景图片查看(OpenGL的几何变换3之内观察全景图),那么我们需要进行分屏该如何实现呢?如下图: 没错就是以前提过的glViewPort函数,废话不多说了,我直接上代码: //从这里开始进 ...

  9. 原！！tomcat7.0 配置数据库连接池 SQLServer2000

    SQLServer2000所需的3个驱动jar包 msbase.jarmssqlserver.jarmsutil.jar 放入WEB-INF lib文件夹中 1.META-INF 创建一个contex ...

  10. hiho_1041 国庆出游

    题目 给定一棵树,N个节点,N - 1条边.给定m个节点,能否找出一种遍历方法,使得首次到达节点ai的时间小于首次到达节点aj的时间(i < j).且经过的路径上的每条边都最多走两遍 分析 我的 ...