線性漸變（linear-gradient）

現行漸變

首先看下示例

（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);

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結束顔色

View Code