兼容IE与firefox的css 线性渐变（linear-gradient）

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">

<head>

<title>线性渐变（linear-gradient）---http://www.jb51.net</title>

.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>

水平渐变

</div>

</body>

</html>

转载于:https://www.cnblogs.com/top5/archive/2012/02/14/2351960.html

兼容IE与firefox的css 线性渐变（linear-gradient）相关推荐

html垂直线性渐变,CSS线性渐变垂直和水平渐变linear-gradient
CSS线性渐变 .test1{ width: 200px; height: 80px; text-align: center; line-height: 80px; margin-bottom: 10 ...
深入理解CSS线性渐变linear-gradient
前面的话在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能.如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果.渐变实际上分为线性渐变和径向渐变两种,本文介绍线性 ...
html边框颜色线性渐变,CSS线性渐变linear-gradient() 函数实现div边框四角样式
先看下要实现的效果. 四个角边框高亮 css代码实现红色框box-red样式,蓝色的只是变换了颜色.box-title是图上渐变实现. .box-red { background: linear-g ...
html中背景条纹效果,使用CSS线性渐变制作条纹背景
主要使用的属性 linear-gradient background:linear-gradient(#000,#ccc); Paste_Image.png 取消中间的渐变过度 background: ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
css线性渐变linear-gradient 参数讲解以及示例
linear-gradient(direction, color-stop1, color-stop2, ...) 用于创建一个表示两种或多种颜色线性渐变的图片. direction 用角度值指定渐变 ...
CSS如何设置自定义渐变色? 线性渐变篇
CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡. CSS定义了三种渐变类型: Linear Gradients (goes down/up/left/right/diagonally) 下 ...
css中的渐变的属性,CSS3 渐变属性（Gradients）-线性渐变(linearGradient)
通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 丛本质上来说,既然 bac ...
php渐变背景颜色,css背景颜色渐变案例：线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...

兼容IE与firefox的css 线性渐变（linear-gradient）

兼容IE与firefox的css 线性渐变（linear-gradient）相关推荐

最新文章

热门文章