CSS3渐变色生成网站:http://gradients.glrzad.com/

本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html

在CSS3出来以前,想要显示一个渐变的效果,必须要专门制作一个图片。

CSS3的出现,使得渐变色得以简单的实现。由于不是所有的浏览器都支持CSS3,所以不是所有的浏览器都能够显现出渐变的效果来。

目前,Mozilla内核的(Firefox)和webkit内核的(Safari/Chrome)浏览器支持这一属性。不过,两者对于渐变的语法有些差异。

webkit

/* 语法,参考自: http://webkit.org/blog/175/introducing-css-gradients/ */;

-webkit-gradient(, [, ], [, ][, ])

/* 实际用法... */

background: -webkit-gradient(

linear, /*渐变的类型*/

0 0,  /*渐变开始的X Y轴坐标*/

0 100%, /*渐变结束的X Y轴坐标*/

from(red),  /*开始的颜色*/

to(blue)    /*结束的颜色*/

);

mozilla

Firefox从3.6版本才开始支持渐变

/* 语法,参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [ || ,]? , [, ]* )

/* 实际用法*/

background: -moz-linear-gradient(

top, /* 渐变从哪里开始,可以是度数,如-45deg*/

red, /* 开始的颜色 */

blue/* 结束的颜色 */

);

(其实这里有些小问题,我在自己的FF试了下,当第一个参数为top的时候显示的很奇怪,

是从上到下一小格红一小格蓝交替的,为45deg的时候倒是正常的,显示的是从左到右的渐变。不知道是什么原因)

如果不需要从一个颜色到另一个颜色的100%的渐变,可以这样做:

举例如下:

background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */

background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));

background: -moz-linear-gradient(top, #dedede, white 8%);

如果想要添加多一种(几种)颜色,可以通过color-stop来实现。

color-stop(哪里开始停止,使用哪种颜色)

举例如下:

background: white; /* 备用属性 */

background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);

background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red));

这个例子中,

对于-moz版本,定义,从元素的20%的高度的地方开始是红色。(按我的理解应该是0~8%为从银灰色到白色,然后从8%到20%的地方是从白变到红色,20%后全是红色)。

对于-webkit版本,显示的是相同的效果,是通过color-stop来实现的。

IE中渐变色的实现

由于IE还不支持CSS3,故不支持渐变,但提供了渐变滤镜,可以实现最简单的渐变效果。

/* IE6,IE7 */

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000');

/* IE8 */

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000')";

关于渐变

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

总是为不支持这些浏览器私有属性的浏览器应用一个默认的,纯色背景。

页面无须在每个浏览器里面看起来完全一样。

ZT FROM HP:http://chenjing1122.blog.51cto.com/2882495/524461

EX:

background-image:linear-gradient(bottom, rgb(154,131,159) 13%,rgb(185,158,191) 57%, rgb(222,190,230) 79%);

background-image:-o-linear-gradient(bottom, rgb(154,131,159) 13%,rgb(185,158,191) 57%, rgb(222,190,230) 79%);

background-image:-moz-linear-gradient(bottom, rgb(154,131,159) 13%,rgb(185,158,191) 57%, rgb(222,190,230) 79%);

background-image:-webkit-linear-gradient(bottom, rgb(154,131,159) 13%,rgb(185,158,191) 57%, rgb(222,190,230) 79%);

background-image:-ms-linear-gradient(bottom, rgb(154,131,159) 13%,rgb(185,158,191) 57%, rgb(222,190,230) 79%);

background-image:-webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.13, rgb(154,131,159)),

color-stop(0.57, rgb(185,158,191)),

color-stop(0.79, rgb(222,190,230))

);

一. 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实现背景颜色渐变 摘抄

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  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. redis 库相关命令

    切换数据库: select 1 查看数据库大小:dbsize 清空数据库: flushdb

  2. javascript中对象的深度克隆

    记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...

  3. 用Application和Session统计在线人数[转]

      在Global.asax全局变量文件中,修改其中的 Session_Start 和 Session_End 方法:代码如下: protected void Session_Start(object ...

  4. Centos7 下配置mysql5.6主从复制实例(一主两从)

    标签:mysql 数据库 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://8941355.blog.51cto.com/89313 ...

  5. F2工作流引擎之 概述(一)

    简介 工作流应该算是基础框架软件,主要用于流程的重组和优化,它有广阔的应用领域.在java下有很多优秀的开源工作流可以选择比如activit5.jpbm4等,在.net下却几乎找不到令人满意的工作流引 ...

  6. easyui-menu 宽度自适应

    easyui-menu里的菜单项是从后端获取的,而这个组件提供的API配置只能设置一个固定宽度,当获取的菜单项字数较多时有可能显示不全.解决方法如下: <style> .myClass{f ...

  7. AspNetPager分页

    1.页面部分 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefi ...

  8. Halcon 10.0 Sample:完整性检查(圆形)

    * ball.hdev: Inspection of Ball Bonding * 球接合检查 Comment Time:// *核心思想:.白色区域用作自动ROI,黑色区域是目标 * .Openin ...

  9. Top Five Hacker Tools Every CISO Should Understand

    As the role of the CISO continues to evolve within organizations towards that of an executive level ...

  10. SparkSQL之旅

    1.准备数据employee.txt ,Gong Shaocheng, ,Li Dachao, ,Qiu Xin, ,Cheng Jiangzhong, ,Wo Binggang, 将数据放入hdfs ...