背景颜色渐变之线性渐变

　　　　语法形式： 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. clipboard_monitor_in_win7

    添加监听 AddClipboardFormatListener(this.Handle); 移除 RemoveClipboardFormatListener(this.Handle); #region ...

  2. js正则表达式replace里有变量的解决方法用到RegExp类

    一直比较害怕使用正则表达式,貌似很深奥很复杂的样子,所以在用js操作字符串的时候,我最多使用的是replace.split.substring.indexOf等函数,这些函数有时候需要多次叠加使用,但 ...

  3. leetcode 198

    198. House Robber You are a professional robber planning to rob houses along a street. Each house ha ...

  4. Linux Top 命令解析 比较详细

    [尊重原创文章出自:http://www.jb51.net/LINUXjishu/34604.html] TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占 ...

  5. dll 劫持

    库: AheadLib 输入dll 处填你要劫持的dll 路径. 例如: C:\WINDOWS\system32\lpk.dll 来自为知笔记(Wiz)

  6. javascript知识点总结----函数内部属性

    在函数内部,有两个特殊的对象:argumengs和this 1.函数的参数 ECMAScript函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,也就是说:你定义的函数只接收2个参数, ...

  7. DataTable自定义排序

    使用JQ DataTable 的时候,希望某列数据可以进行自定义排序,操作如下:(以中文排序和百分比排序为例) 1:定义排序类型: //百分率排序 jQuery.fn.dataTableExt.oSo ...

  8. SqlLocalDB使用笔记

    一.介绍 SqlLocalDB是VS安装时附带的数据库软件,相当于精简版的SQL Express. 二.使用 VS版本为2015,默认安装位置为:C:\Program Files\Microsoft ...

  9. RequireJS基础（二）

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义 ...

  10. 微信支付-“申请退款”接口遇到curl出错，错误码:58

    该错误是没有 使用证书 导致的. 解决办法: 1. 下载证书. 2. 拷贝到 WxPayPubHelper/cacert/目录下 重试退款,OK