背景颜色渐变之线性渐变

　　　　语法形式： firefox浏览器 　　　　　background：-moz-linear-gradient(position/deg，startColor，endColor);

　　　　　　　　　opera浏览器  　　　　　 background: -o-linear-gradient(position/deg,startColor,endColor);

　　　　　　　　　safari和chrome浏览器    background: -webkit-linear-gradient(position/deg,startColor,endColor);//新版本

　　　　　　　　　在ie下主要通过滤镜实现。？？

　　　　事例：第一个参数为角度或者top、left等位置参数，但是因为top、left的变化较单一，所以一般使用角度作为参数，更利于实现多种渐变。

 <!DOCTYPE html>

 <html>

 <head>

     <title>css3</title>

 </head>

 <style type="text/css">

     .example{

         width:100%;

         height:500px;

         background: linear-gradient(45deg,red,blue);

         background: -webkit-linear-gradient(45deg,red,blue);

         background: -o-linear-gradient(45deg,red,blue);

         background: -moz-linear-gradient(45deg,red,blue);

     }

 </style>

 <body>

 <div class="example">

     111

 </div>

 </body>

 </html>

　　　　当指定的角度时，该角度为一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右水平渐变，而90度将创建一个从底部到顶部的垂直渐变。

参考：http://www.w3cplus.com/content/css3-gradient

css3的背景颜色渐变@线性渐变的更多相关文章

  1. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

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

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

  3. CSS3渐变——线性渐变

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

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

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

  5. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

  6. CSS3实现背景颜色渐变 摘抄

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  7. CSS3学习之linear-gradient（线性渐变）

    转自:http://www.cnblogs.com/rainman/p/5113242.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使 ...

  8. CSS3 线性渐变linear-gradient

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...

  9. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

随机推荐

  1. sql参数化查询in的参数

    private Query setParameter(Query query, Map<String, Object> map) { if (map != null) { Set<S ...

  2. PostgreSQL笔记

    本文针对目前最新版9.5.1,若非说明,文中所说文档即指官方文档.本人刚接触PostgreSQL不久,文中不免错漏,请大家指正:随着了解深入,本文[可能]会不定期更新补足. JSON PostgreS ...

  3. subline text3 删除行 快捷键设置

    打开 首选项-->按键绑定 { "keys": ["ctrl+shift+k"], "command": "run_macr ...

  4. 仿google art图片预览算法及demo（web版本）

    演示地址: http://codeman35.itongyin.com:19001/v3/preview.html 功能支持:拖动 滚轴放大缩小 按钮放大缩小 鹰眼预览 鹰眼拖动等功能

  5. Struts2框架之-注解开发

    Struts2主要解决了从JSP到Action上的流程管理,如何进行Uri和action类中每个方法的绑定这是重点,在这里先简单看一下配置文件中的简单配置: <span style=" ...

  6. HttpClientUtils

    import java.io.IOException;import java.io.UnsupportedEncodingException;import java.util.List; import ...

  7. <读书笔记>软件调试之道 ：问题的核心-诊断

    声明:本文档的内容主要来源于书籍<软件调试修炼之道>作者Paul Butcher,属于读书笔记. 不要急于动手! 尽管可以利用各种工具和技术以及软件自身查找缺陷,但是你最重要的财富是你的智 ...

  8. [Python] MySQLdb（即 MySQL-python 包）在 OS X 中安装指南

    本文参考:http://www.cnblogs.com/ifantastic/archive/2013/04/13/3017677.html 安装环境:OS X 操作系统,Python 2.7.10 ...

  9. Datasnap Image

    delphi用,不能与java.c#互相识别. procedure TServerMethods.UpdateDoc(ItemID : integer; doc : TStream); delphi用 ...

  10. C# ADO.NET (sql语句连接方式)(增,删,改)

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...