兼容IE與firefox、chrome的css 線性漸變（linear-gradient）

時間 2019-11-26

標籤兼容 firefox chrome css 線性漸變 linear gradient 欄目 Firefox 简体版

原文原文鏈接

現行漸變
首先看下示例
（1）垂直漸變css

（2）垂直漸變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結束顏色web

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