背景颜色渐变之线性渐变

　　　　语法形式： 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. Sequelize 关系模型简介

    Sequelize 关系模型简介 先介绍一下本文用到的术语: 源: 调用 sequelize 中关系方法的调用者 目标: 调用 sequelize 中关系方法中的参数 比如, User.hasOne( ...

  2. cs11_c++_lab3

    Matrix.hh class Matrix { int row; int col; int *p; void copy(const Matrix &m); void clearup(); p ...

  3. 萌萌的websocket原理解析

    转载自:http://www.zhihu.com/question/20215561 一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持 ...

  4. LinQ的查询操作

    LinQ的高级查询:-------------------在car表格进行练习操作: 一.模糊查询:1.在后台代码:(Contains)List<car>list=con.car.wher ...

  5. Python自动化 【第十六篇】：JavaScript作用域和Dom收尾

    本节内容: javascript作用域 DOM收尾 JavaScript作用域 JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走 ...

  6. OpenCV Template Matching Subpixel Accuracy

    OpenCV has function matchTemplate to easily do the template matching. But its accuracy can only reac ...

  7. [jv-convert] Error 1，[all-recursive] Error 1

    g++4.6编译是报错: make profiledbootstrap /var/tmp/gcc4/gcc-4.0.1/sparc-sun-solaris2.8/gcc/gcj -B/var/tmp/ ...

  8. ASP.NET保存信息总结(Application、Session、Cookie、ViewState和Cache等) ZT

    http://www.cnblogs.com/ranran/p/4065619.html http://www.cnblogs.com/jxlsomnus/p/4450911.html 以下是关于AS ...

  9. 关于angularjS与jQuery框架的那些事

    这篇文章主要介绍了jQuery和angularJS的区别浅析,本文着重讲解一个熟悉jQuery的程序员如何应对angularJS中的一些编程思想的转变吗,需要的朋友可以参考下 最近一直研究angula ...

  10. 15 个有趣的 JavaScript 与 CSS 库

    原文转载:http://www.codeceo.com/article/15-interesting-js-css-framework.html 1. Wing Wing 是一个微型(压缩后仅有4KB ...