#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}

上面是c3的实现方法,但是现在对c3的支持不是很好,所以只有通过其他的方式来实现。

下面则是用js来实现

       var setGradient = (function() {
//private variables;
var p_dCanvas = document.createElement('canvas');
var p_useCanvas = !!(typeof(p_dCanvas.getContext) == 'function');
var p_dCtx = p_useCanvas ? p_dCanvas.getContext('2d') : null;
var p_isIE = /*@cc_on!@*/ false;
//test if toDataURL() is supported by Canvas since Safari may not support it
try {
p_dCtx.canvas.toDataURL()
} catch(err) {
p_useCanvas = false;
};
if(p_useCanvas) {
return function(dEl, sColor1, sColor2, bRepeatY) {
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);
if(!dEl) return false;
var nW = dEl.offsetWidth;
var nH = dEl.offsetHeight;
p_dCanvas.width = nW;
p_dCanvas.height = nH;
var dGradient;
var sRepeat;
// Create gradients
if(bRepeatY) {
dGradient = p_dCtx.createLinearGradient(, , nW, );
sRepeat = 'repeat-y';
} else {
dGradient = p_dCtx.createLinearGradient(, , , nH);
sRepeat = 'repeat-x';
}
dGradient.addColorStop(, sColor1);
dGradient.addColorStop(, sColor2);
p_dCtx.fillStyle = dGradient;
p_dCtx.fillRect(, , nW, nH);
var sDataUrl = p_dCtx.canvas.toDataURL('image/png');
with(dEl.style) {
backgroundRepeat = sRepeat;
backgroundImage = 'url(' + sDataUrl + ')';
backgroundColor = sColor2;
};
}
} else if(p_isIE) {
p_dCanvas = p_useCanvas = p_dCtx = null;
return function(dEl, sColor1, sColor2, bRepeatY) {
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);
if(!dEl) return false;
dEl.style.zoom = ;
var sF = dEl.currentStyle.filter;
dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient( GradientType=', +(!!bRepeatY), ',enabled=true,startColorstr=', sColor1, ', endColorstr=', sColor2, ')'].join('');
};
} else {
p_dCanvas = p_useCanvas = p_dCtx = null;
return function(dEl, sColor1, sColor2) {
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);
if(!dEl) return false;
with(dEl.style) {
backgroundColor = sColor2;
};
//alert('your browser does not support gradient effet');
}
}
})(); setGradient('nth2', '#012D5E', '#07779D', );
    第一个参数是容器名(id)接下来则是起始颜色和结束颜色,最后1代表从左到右 0表示从上到下

js实现颜色渐变的更多相关文章

  1. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  2. 颜色渐变的JS代码

    今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> ...

  3. jQuery 小特效【文本框折叠隐藏,展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  4. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. iOS 动画绘制线条颜色渐变的折线图

    效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...

  6. CSS3颜色渐变模式

       1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...

  7. 【iOS实现一个颜色渐变的弧形进度条】

    在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...

  8. IOS导航栏颜色渐变与常用属性

    (转:http://www.cnblogs.com/Lingchen-start/archive/2015/10/23/4904361.html) 今年很忙,忙的写日志的时间都很少.  少的可怜. 自 ...

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

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

随机推荐

  1. Java基础学习-Path环境变量的配置

    1.为什么要进行Path环境变量的配置       程序的编译和执行需要使用到javac和java命令,所以只能在bin目录下写程序,而实际开发中,我们不可能将程序全部写到bin目录下,所以我们不许让 ...

  2. File 与 FileStream 文件运用

    using System.IO; using System.Text; using UnityEngine; /// <summary> /// File 一次性控制 (小文件) /// ...

  3. Intellij IDEA 设置启动JVM参数

    目录 采用CMS垃圾回收配置: 采用G1垃圾回收配置: 参数说明: 通用参数: CMS机制才有的参数: G1机制才有的参数: 参考: 打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 v ...

  4. 关于乱码(MessyCode)问题

    乱码本质:读取二进制时采用的编码和最初将字符转成二进制时的编码不一致 编码时(得二进制数组时)不抛出异常,数据就不会被破坏 Java关于乱码(MessyCode)问题 Java使用的是Unicode编 ...

  5. Spring Boot 2集成Redis

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.redis是一个key-value存储系统,支持存储的valu ...

  6. C语言获取Linux系统精确时间

    gettimeofday()函数的使用方法 1.函数原型 #include <sys/time.h> int gettimeofday(struct timeval *tv, struct ...

  7. 【转】 ISP概述、工作原理及架构

    1.概述 ISP全称Image Signal Processing,即图像信号处理.主要用来对前端图像传感器输出信号处理的单元,以匹配不同厂商的图象传感器. ISP 通过一系列数字图像处理算法完成对数 ...

  8. c3p0 操作

    E3p0连接池 c3p0-config.xml c3p0-config.xml(必须叫这个名字),然后必须放在工程目录的src下面 注意:c3p0里面可以配置多个连接信息,可以给每个配置起个名字,这样 ...

  9. React文档(八)条件渲染

    在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...

  10. Regex-Golf

    A man, a plan: 判断回文,如果不确定串长度情况下可以考虑利用反向引用构造pattern,例如: (.)\1  , (.)(.)\2\1 , (.)(.)(.)\3\2\1 ...但这里只 ...