本文转载自：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. 配置Hadoop的Eclipse开发环境

    前言 在先前的文章中,已经介绍了如何在Ubuntu Kylin操作系统下搭建Hadoop运行环境,而现在将在之前工作的基础上搭建Eclipse开发环境. 配置 开发环境:Eclipse 4.2 其他同 ...

  2. 设置mysql远程连接root权限

    在远程连接mysql的时候应该都碰到过,root用户无法远程连接mysql,只可以本地连,对外拒绝连接.需要建立一个允许远程登录的数据库帐户,这样才可以进行在远程操作数据库.方法如下:默认情况下MYS ...

  3. ListView优化相关

    链接1 http://www.jb51.net/article/35273.htm 链接2 http://www.cnblogs.com/xilinch/archive/2012/11/08/2760 ...

  4. 深入理解HTTP

    深入理解HTTP协议(转) http协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(Wo ...

  5. 使用Spring + Jedis集成Redis

    转自:http://my.oschina.net/u/866380/blog/521658 摘要 使用Spring和Jedis完成分片Redis的集成 一.集成环境 Tomcat7 JDK1.7 Je ...

  6. MySQL基于mysqldump及lvmsnapshot备份恢复

    一.备份对象 数据 配置文件 代码:存储过程,存储函数,触发器 跟复制相关的配置 二进制日志文件 二.备份工具 mysqldump:逻辑备份工具 InnoDB热备.MyISAM温备.Aria温备 备份 ...

  7. poj2367 拓扑序

    题意:有一些人他们关系非常复杂,一个人可能有很多后代,现在要制定一种顺序,按照前辈在后代前排列就行 拓扑序裸题,直接建边拓扑排序一下就行了. #include<stdio.h> #incl ...

  8. （转）现代C++函数式编程

    本文转自:http://geek.csdn.net/news/detail/96636     现代C++函数式编程 C++ 函数式编程 pipeline 开发经验 柯里化 阅读2127    作者简 ...

  9. 锁_rac环境kill锁表会话后出现killed状态（解决）

    原创作品,出自 "深蓝的blog" 博客,深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/46876961 ra ...

  10. unity3d用鼠标拖动物体的一段代码

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 这是一段拖动物体的代码,比较简洁明了,对了解uni ...