适配IE与firefox的css 线形渐变色(linear

日期:2020-12-13 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

现行渐变色
最先看下示例
(1)竖直渐变色


(2)竖直渐变色


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)---https://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>