本文转载自：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. PAT (Basic Level) Practise：1004. 成绩排名

    [题目链接] 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入包含1个测试用例,格式为 第1行:正整数n 第2行:第1个学生的姓名 学号 成绩 第3 ...

  2. Wamp安装使用+Git for Windows

    相信很多朋友都曾在windows上做过web开发,我们常用的Web应用程序平台是:Apache+Mysql+Perl/PHP/Python,在windows下集成称为WAMP.web开发新手有时候由于 ...

  3. C++ 中的C_str()函数用法

    语法: const char *c_str(); c_str()函数返回一个指向正规C字符串的指针常量, 内容与本string串相同. 这是为了与c语言兼容,在c语言中没有string类型,故必须通过 ...

  4. C# DataSet取值

    1.读取dataset中某表某行某列的值: dataset.Tables[].Rows[].ItemArray[].ToString()dataset.Tables[0].Rows[0][0]; 该示 ...

  5. ANTLR3完全参考指南读书笔记[03]

    前言 文中第4章内容有点多,有点枯燥,但不坚持一下,之前所做的工作就白做了. 再次确认一下总体目标: protege4编辑器中Class Definition中语法解析和错误提示: Java虚拟机规范 ...

  6. 比较compareTo与equals及==的区别

    1.compareTo: 附上:源码: public int compareTo(String anotherString) {         int len1 = value.length;   ...

  7. ZOJ 1113 u Calculate e

    原题链接 题目大意:迭代求自然常数e. 解法:没什么好说的,注意数据类型和输出格式. 参考代码: #include<stdio.h> #include<math.h> int ...

  8. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  9. code::blocks的快捷键汇总

      编辑部分: Ctrl + A:全选 Ctrl + C:复制 Ctrl + X: 剪切 Ctrl + V:粘贴 Ctrl + Z:撤销 Ctrl + S:保存 Ctrl + Y / Ctrl + S ...

  10. 制作自己的ros机器人（navigaion）前提--22

    摘要: 原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/  一.要求: 1.大家已经对ROS的基本概念(进程间通讯topic service 数据类型 m ...