<!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. Mybatis+struts2+spring整合

    把student项目改造成ssm  struts2 +mybatis+spring 1,先添加spring支持:类库三个,applicationContext.xml写在webinf下四个命名空间,监 ...

  2. [Java解惑]异常

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

  3. 详解C#委托，事件与回调函数

    .Net编程中最经常用的元素,事件必然是其中之一.无论在ASP.NET还是WINFrom开发中,窗体加载(Load),绘制(Paint),初始化(Init)等等.“protected void Pag ...

  4. jQuery EasyUI DataGrid API 中文文档

        扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagi ...

  5. [转]使用onclick跳转到其他页面/跳转到指定url

    如果是本页显示可以直接用location,方法如下: ①onclick="javascript:window.location.href='URL'" ②onclick=" ...

  6. [poj2785]4 Values whose Sum is 0(hash或二分)

    4 Values whose Sum is 0 Time Limit: 15000MS Memory Limit: 228000K Total Submissions: 19322 Accepted: ...

  7. Scrum Meeting---Eight(2015-11-3)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 数据库与客户端通讯 5h 服务器与客户端通讯测试 4h 胡亚坤 好友添加 2h 好友添加 2h 刘猛 ...

  8. [转载] tmux 使用指南

    原文: https://danielmiessler.com/study/tmux/ tmux的用法和screen类似, 比screen好用一些, 不过需要单独安装

  9. CodeBlocks使用技巧

    快键键 注释:选中后Shfit + C 取消注释:选中后Shfit + X 查找替换:Ctrl + R Build(Ctrl + F9) Run (Ctrl + F10) Build + Run (F ...

  10. SQL 调优专题总结

    oracle 的优化器: oracle 有两种优化器:基于规则的优化器(rbo/rule based optimizer)和基于代价的优化器(cbo/cost based optimizer). 有时 ...