一. 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即可，不要和其他的浏览器混淆


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">

    .linear{

        width:100%;

        height:600px;

        FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/

        background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */

        background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

        background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/

        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));      /* Safari 4-5, Chrome 1-9*/

        background: -webkit-linear-gradient(top, #fff, #0000ff);   /*Safari5.1 Chrome 10+*/

        background: -o-linear-gradient(top, #fff, #0000ff);  /*Opera 11.10+*/

    }

</style>

<body>

<div class="linear"></div>

</body>
</html>
												


											
CSS颜色渐变的更多相关文章
	

    
						
  1. css颜色渐变在不同浏览器的设置
		
    在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0  ...
    
		
    2. 
								
  2. css 颜色渐变
		
    .top_nav {     width: 100%;     height: 29px;            /* 如果浏览器不支持渐变,使用图像作为背景 */     background: u ...
    
		
    3. 
						
  3. css 颜色渐变 兼容性
		
    参考文献:http://caibaojian.com/css3-background-gradient.html    https://www.cnblogs.com/xzzzys/p/7495725 ...
    
		
    4. 
						
  4. CSS和JS两种颜色渐变文字效果代码
		
    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
    
		
    5. 
						
  5. 第四界css大会  黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
		
    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
    
		
    6. 
						
  6. css文字颜色渐变的3种实现
		
    在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...
    
		
    7. 
						
  7. 【CSS进阶】CSS 颜色体系详解
		
    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...
    
		
    8. 
						
  8. CSS3颜色渐变模式
		
       1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...
    
		
    9. 
						
  9. CSS背景色渐变
		
      试了下 渐变色  ,主要确定开始位置  结束位置,以及对应的color-stop;  以下是兼容不同浏览器的代码片段       代码:<style type="text/css& ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 数据加密，android客户端和服务器端可共用
			
    安卓中,不管是内网还是外网,数据的传输首要考虑就是安全问题,尤其是用户信息,以及各种密码等敏感信息. 所以说,对数据的加密是很有必要的,尤其是当下物联网蓬勃发展的今天,数据安全尤为重要. 数据加密的方 ...
    
			
    2. 
						
  2. Python云端系统开发入门——框架基础
			
    Django框架基础 这是我学习北京理工大学嵩天老师的<Python云端系统开发入门>课程的笔记,在此我特别感谢老师的精彩讲解和对我的引导. 1.Django简介与安装 Django是一个 ...
    
			
    3. 
						
  3. IOS学习3——代理
			
    本文转载自:你真的了解iOS代理设计模式吗? 在项目中我们经常会用到代理的设计模式,这是iOS中一种消息传递的方式,也可以通过这种方式来传递一些参数.这篇文章会涵盖代理的使用技巧和原理,以及代理的内存 ...
    
			
    4. 
						
  4. C:宏定义的一些格式（怕忘记）
			
    现在还没怎么用到宏定义,但以后肯定会经常用的,写下这盘,以后忘记了可以温故.首先宏定义必须写在函数之外,其作用域从宏定义命令起到源程序结束,也就是说一但定义系统就会分配内存,想让它结束用“#undef ...
    
			
    5. 
						
  5. Linux 学习记录 五(软件的安装升级).
			
    一.gcc gcc是Linux上面最标准的C语言的编译程序,用来源代码的编译链接. gcc -c hello.c 编译产生目标文件hello.o gcc -O hello.c 编译产生目标文件,并进行 ...
    
			
    6. 
						
  6. treeview插件使用：根据子节点选中父节点
			
    鄙人公司没有专门的前端,所以项目开发中都是前后端一起抡.最近用bootstrap用的比较频繁,发现bootstrap除了框架本身的样式组件外,还提供了多种插件供开发者选择.本篇博文讲的就是bootst ...
    
			
    7. 
						
  7. tensorflow ckpt文件转caffemodel时遇到的坑
			
    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 ...
    
			
    8. 
						
  8. requireJS教程
			
    目录[-] 使用 RequireJS 优化 Web 应用前端 AMD 简介 传统 JavaScript 代码的问题 AMD 的引入 清单 1. AMD 规范 RequireJS 简介 实战 Requi ...
    
			
    9. 
						
  9. PHP进阶，使用交互模式进行快速测试实验？
			
    额,那啥,PHP很强,大家都知道哈.不过呢,在搞PHP里的人中,自然也要分高下的.当然了,我更喜欢用好玩来形容了. 什么叫做快速开发?我觉得,快就得快到随手写几个字,就能让代码跑起来!那么,PHP能做 ...
    
			
    10. 
						
  10. CSS3 美女动画相框
			
    把下面的内容放到一个body内,运行看一看:) <style> *{ margin:0; padding:0;} .bg1{ background-image:-moz-linear-gr ...
    
			
    11.