背景颜色渐变之线性渐变

　　　　语法形式： 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. Xenko基础API笔记2-Enum Keys按键

    Name   Description A The 'a' key. Add The 'add' key. Apps The 'apps' key. Attn The 'attn' key. B The ...

  2. Caused by: java.lang.NoSuchMethodError: javax.persistence.spi.PersistenceUnitInfo.getValidationMode

    进行 spring mvc jpa整合时.Junit方法测试时. 异常: org.springframework.beans.factory.BeanCreationException: Error ...

  3. Python + PIL 处理支付宝AR红包

    思路比较简单:1.对图片进行锐化处理:2.设(r_h, g_h, b_h)为支付宝遮罩黑条的RGB值,以此为中心,查找半径为Diff_radius的范围内所有的色值: 3.对每一行符合步骤2的像素点个 ...

  4. 这是个简单的UTF8转码的小Demo

    NSString *name = @"你好啊"; NSString *string = [NSString stringWithFormat:@"%@",nam ...

  5. JVM基本结构

    以下是JVM的一个基本架构图,在这个基本架构图中,栈有两部份,Java线程栈以及本地方法栈,栈的概念与C/C++程序基本上都是一个概念,里面存放的都是栈帧,一个栈帧代表的就是一个函数的调用,在栈帧里面 ...

  6. ios10 no route to host

    IdTCPClient1 ios10 no route to host IOS 9 正常 IOS10 出错,参考下面的设置解决问题 http://www.sh-huhe.com/solution/14 ...

  7. python容器类型：列表，字典，集合等

    容器的概念我是从C++的STL中学到的 什么是容器? 容器是用来存储和组织其他对象的对象. 也就是说容器里面可以放很多东西,这些东西可以是字符串,可以是整数,可以是自定义类型,然后把这些东西有组织的存 ...

  8. hashMap的get()方法，错用并发造成cpu和负载高

    一次线上问题的解决 线上发现服务cpu使用达到98%,负载高达200多,64核心cpu,下面介绍解决过程: 1.top命令查出占用cpu高的进程pid 2.使用jstack -l pid >du ...

  9. python---IO多路复用

    这里的IO是指网络IO python中通过select模块实现IO多路复用,select模块中有select.poll.epoll等方法 下面例子以select模块实现IO多路复用 仅仅只有IO多路复 ...

  10. 《CoffeeScript应用开发》学习：第三章-构建简单的应用程序

    字符串插值 CoffeeScript提供了一种更好的构建字符串的解决方案.在双引号字符串(单引号无效)中使用#{}包含一个动态的值. str = 'Hello, CoffeeScript.' cons ...