Firefox可以使用角度来设定渐变的方向,而webkit只能使用x和y轴的坐标。

渐变可以创建类似于彩虹的效果,低版本的浏览器使用图片来实现,CSS3将会轻松实现网页渐变效果

粘贴代码

<div class="test">
</div> <style>
.test{
width:200px;
height:100px;
border:1px solid #ccc;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #67fa90), color-stop(1, #14ce9d));
background-image: -moz-linear-gradient(top, #67fa90, #14ce9d); /* Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#67fa90', endColorstr='#14ce9d', GradientType='0');
}
</style>

  

一. Webkit浏览器

  (1) 第一种写法:

background:-webkit-gradient(linear ,10% 10%,100% 100%,

color-stop(0.14,rgb(255,0,0)),

color-stop(0.5,rgb(255,255,0)),

color-stop(1,rgb(0,0,255)) );

第一个参数:表示的是渐变的类型  linear线性渐变

第二个参数:分别对应x,y方向渐变的起始位置

第三个参数:分别对应x,y方向渐变的终止位置

第四/五/N个参数:设置渐变的位置及颜色

  

  (2)第二种写法:这种写法比较简单,而且效果比较自然

background:-webkit-gradient(linear, 0 0, 0 100%, from(#2074af), to(#2c91d2));

第一个参数:表示的是渐变的类型 linear线性渐变

第二个参数:分别对应x,y方向渐变的起始位置

第三个参数:分别对应x,y方向渐变的终止位置

第四个参数:设置了起始位置的颜色

第五个参数:设置了终止位置的颜色

  

二.Mozilla浏览器

  (1)第一种写法:

background:-moz-linear-gradient(10 10 90deg,

rgb(25,0,0) 14%,

rgb(255,255,0) 50%,

rgb(0,0,255) 100%);

第一个参数:设置渐变起始位置及角度

第二/三/四/N个参数:设置渐变的颜色和位置

  

  (2)第二种写法:这种写法比较简单,而且效果比较自然

background:-moz-linear-gradient(top, #FFC3C8,#FF9298);

第一个参数:设置渐变的起始位置

第二个参数:设置起始位置的颜色

第三个参数:设置终止位置的颜色

    

三.IE 浏览器

IE浏览器实现渐变只能使用IE自己的滤镜去实现

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);

第一个参数:渐变起始位置的颜色

第二个参数:渐变终止位置的颜色

第三个参数:渐变的类型

0 代表竖向渐变        1  代表横向渐变

这里设置背景的时候不需要给background设置,直接用filter即可,不要和其他的浏览器混淆

css3 渐变色的更多相关文章

  1. 关于css3 渐变色

    渐变色在现在来说非常的常用:(注意渐变色只能给背景加 不能给边框加) 方法:-webkit-linear-gradient() 括号里面第一个值为渐变色的开始方向,第二个值为开始的颜色,中间用逗号隔开 ...

  2. css3 渐变色兼容移动端

    .group_1 background #1a78f3 // 兼容不显示渐变色的浏览器 background: linear-gradient(180deg, #1a78f3 , #fff); bac ...

  3. css3渐变色实现小功能 ------ css(linaer-gradient)

    由沿直线两种或多种颜色之间的渐进转换的图像.它的结果是数据类型的对象,这是一种特殊的类型. 与任何梯度一样,线性梯度没有内在维度 ; 即,它没有天然或优选的尺寸,也没有优选的比例.其具体尺寸将与其适用 ...

  4. css3渐变色字体

    \3cspan id="mce_marker" data-mce-type="bookmark">\3c/span>\3cspan id=" ...

  5. CSS3图片倒影技术实现及原理

    CSS3图片倒影技术实现及原理 目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏 ...

  6. CSS3实现背景颜色渐变

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

  7. CSS3 外发光 渐变色

    渐变色--线性渐变 linear-gradient #bg { width: 100%; background: -webkit-linear-gradient(#9f1c65, #d89068,#7 ...

  8. 【CSS3】---颜色RGBA及渐变色

    颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color:rgba ...

  9. Css3 圆角和渐变色问题(IE9)

    border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#569B0E', endC ...

随机推荐

  1. linux命令下载安装软件

    在ubuntu下获取对应内核源码命令 Ubuntu的包管理系统,为您提供了一种高效快捷的软件管理方式,您只要知道您需要什么软件就可以了,甚至不需要关心它存放在网络上的哪一台服务器中,而且绝大多数的软件 ...

  2. Reading Text-based Files In ASP.NET

    Friday, July 17, 2015 1:43 PM Every time I need to work with the contents of text-based files in an ...

  3. GCC 4.7相对4.6.x的改进点

    原文:http://www.iteye.com/news/24628针对C的功能改进: 支持ISO C11标准中的更多特性.除了之前的-std=c1x和-std=gnu1x选项外,GCC现在还支持-s ...

  4. c# .NET开发邮件发送功能的全面教程(含邮件组件源码)

    http://www.cnblogs.com/heyuquan/p/net-batch-mail-send-async.html

  5. window7 Oracle卸载步骤

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务(或 运行 services.msc) 停止所有Oracle服务.2. 开始->程序-& ...

  6. C#操作excel打印

    using System; using System.Data; using System.IO; using System.Runtime.InteropServices; using System ...

  7. EF Power Tools使用

    转载:http://blog.csdn.net/planisnothing/article/details/8532316 1.可以很方便根据数据库生成Code First模式的代码,如果是已有项目转 ...

  8. ORB SLAM2 学习笔记

    cd ~/Documents/demos/ORB_SLAM2 ./Examples/RGB-D/rgbd_tum Vocabulary/ORBvoc.txt Examples/RGB-D/TUM1.y ...

  9. 洛谷P2763 试题库问题(最大流)

    传送门 网络流界的一股清流啊……终于没那么变态了…… 考虑一下怎么建图.对于每一个类型,我们从$S$向他连边,容量为它所需的题数,表明它要可以有这么多题,对于每一道题目,我们从它对应的类型向他连边,容 ...

  10. 跟我一起读postgresql源码(四)——Planer(查询规划模块)(上)

    时间一晃周末就过完了,时间过得太快,不由得让人倍加珍惜.时间真是不够用哈~ 好的不废话,这次我们开始看查询规划模块的源码吧. 查询规划部分的在整个查询处理模块应该是在一个非常重要的地位上,这一步直接决 ...