日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

linear-gradient 兼容IE與firefox的css 線性漸變

云知道

【linear-gradient 兼容IE與firefox的css 線性漸變】現行漸變
首先看下示例
（1）垂直漸變

linear-gradient 兼容IE與firefox的css 線性漸變



（2）垂直漸變
linear-gradient 兼容IE與firefox的css 線性漸變



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

    推薦閱讀