一. 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  代表横向渐变

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

CSS3实现背景颜色渐变 摘抄的更多相关文章

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

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

  2. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  3. CSS3实现背景颜色渐变

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

  4. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  5. Android特效专辑(二)——ViewPager渲染背景颜色渐变(引导页)

    Android特效专辑(二)--ViewPager渲染背景颜色渐变(引导页) 首页:http://blog.csdn.net/qq_26787115/article/details/50439020 ...

  6. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  7. WPF 背景颜色渐变的滑动条实现

    原文:WPF 背景颜色渐变的滑动条实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83507 ...

  8. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

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

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

随机推荐

  1. 谈谈 ES6 的 Promise 对象

    https://segmentfault.com/a/1190000002928371 前言 开篇首先设想一个日常开发常常会遇到的需求:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作.一般 ...

  2. spring---aop 配置

    第一种:注解配置AOP 注解配置AOP(使用 AspectJ 类库实现的),大致分为三步: 1. 使用注解@Aspect来定义一个切面,在切面中定义切入点(@Pointcut),通知类型(@Befor ...

  3. spring boot 框架 启动更新项目,以及生成 "实体_"文件

    1.更新项目 clean  --->  更新项目 ---> package--->refresh 即可.(这几个步骤一个不能够少) 2.项目中的类的依赖关系存在,但是无法导入依赖 m ...

  4. 数组Arrays

    1.toString 方法 Arrays的toString方法可以方便的输出一个数组的字符串形式,方便查看,它有九个重载的方法,包括八种基本类型数组和一个对象类型数组,这里列举两个: public s ...

  5. CentOS7搭建hadoop2.6.4双节点集群

    环境: CentOS7+SunJDK1.8@VMware12. NameNode虚拟机节点主机名:master,IP规划:192.168.23.101,职责:Name node,Secondary n ...

  6. WinForm------ToolTipController与GridControl的连用

    1.拖入一个ToolTipController控件,和一个GridControl控件 2.设置GridControl中的GridView的中的属性ToolTipController为刚刚拖入的Tool ...

  7. Java——基本容器:JFrame

    创建一个新的窗体 import java.awt.Color; import javax.swing.JFrame; //======================================= ...

  8. Eclipse中修改Web项目的URL访问路径

    背景 访问路径,也就是指在浏览器中访问该web系统时的根路径,比如http://localhost:8080/xxxx/index.jsp  这里的xxxx,也就是request.getContext ...

  9. BuildingAssetBundles in 5.x

    http://docs.unity3d.com/Manual/BuildingAssetBundles5x.html

  10. OWIN support for the Web API 2 and MVC 5 integrations in Autofac

    Currently, in the both the Web API and MVC frameworks, dependency injection support does not come in ...