本文转载自：http://www.cnblogs.com/yichengbo/archive/2012/10/27/2742618.html

IE系列

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平 
Firefox 
background: -moz-linear-gradient(top, #FF0000, #F9F900); 
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变 
Opera 
background: -o-linear-gradient(top,#FF0000, #F9F900); 
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变 
webkit，如Chrome、Safari等 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>线性渐变（linear-gradient）---http://www.jb51.net</title> 
<style type="text/css"> 
.test1 
{ 
width: 200px; 
height: 80px; 
text-align: center; 
line-height: 80px; 
margin-bottom: 10px; 
color: White; 
font-size: 20px; 
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 
background: -moz-linear-gradient(top, #FF0000, #F9F900); 
background: -o-linear-gradient(top,#FF0000, #F9F900); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 
} 
.test2 
{ 
width: 200px; 
height: 80px; 
text-align: center; 
line-height: 80px; 
margin-bottom: 10px; 
color: White; 
font-size: 20px; 
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1'); 
background: -moz-linear-gradient(left, #FF0000, #F9F900); 
background: -o-linear-gradient(left,#FF0000, #F9F900); 
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900)); 
} 
</style> 
</head> 
<body> 
<div class="test1"> 
垂直渐变 
</div> 
<div class="test2"> 
水平渐变 
</div> 
</body> 
</html>

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

  1. css颜色渐变在不同浏览器的设置

    在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...

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

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

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

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

  4. CSS3颜色渐变模式

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

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

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

  6. 颜色渐变的JS代码

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

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

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

  8. CSS3 颜色渐变、阴影、渐变的阴影

    css阴影: 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 文字阴影:text-shadow:X Y Npx ...

  9. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

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

随机推荐

  1. css 中input和select混排对齐问题

    当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,一个vertical-align:middle就可搞定.

  2. Install Fastx (zz)

    Fastx-toolkit installation on CentOS ===================================== Tested on CentOS release ...

  3. centos彻底删除文件夹、文件命令（centos 新建、删除、移动、复制等命令）

    centos彻底删除文件夹.文件命令(centos 新建.删除.移动.复制等命令: 1.新建文件夹 mkdir 文件名 新建一个名为test的文件夹在home下 view source1 mkdir ...

  4. ZOJ 1216 Deck

    原题链接 题目大意:1/2+1/4+1/6+…1/n 解法:直接累加即可. 参考代码: #include<stdio.h> int main(){ printf("# Cards ...

  5. poj1417 带权并查集+0/1背包

    题意:有一个岛上住着一些神和魔,并且已知神和魔的数量,现在已知神总是说真话,魔总是说假话,有 n 个询问,问某个神或魔(身份未知),问题是问某个是神还是魔,根据他们的回答,问是否能够确定哪些是神哪些是 ...

  6. OSPF

    Ospf OSPF(开放最短路径优先协议)是一种无类内部网关协议(IGP):是一种链路状态路由选择协议: 入门: 可以把整个网络(一个自治系统AS)看成一个王国,这个王国可以分成几个 区(area), ...

  7. .c和.h文件的区别（转载）

    一个简单的问题:.c和.h文件的区别学了几个月的C语言,反而觉得越来越不懂了.同样是子程序,可以定义在.c文件中,也可以定义在.h文件中,那这两个文件到底在用法上有什么区别呢? 2楼:子程序不要定义在 ...

  8. javascript往textarea追加内容

    <html> <body> <textarea id="content"></textarea> <script> va ...

  9. C++仿函数和typename的用法

    1.仿函数的定义是很简单的,就是一个重载了括号()运算符的类,也被称为函数对象. 主要是用于个性化扩展算法对象.stl中实现了好多算法,每个算法都可以完成日常的大部分工作,设计者还允许你在这些强大的算 ...

  10. -aborted-exception-during-the-exce

    http://stackoverflow.com/questions/20988445/how-to-avoid-response-end-thread-was-being-aborted-excep ...