Webkit引擎
-webkit-gradient(linear, left top, right top, from(#F00), to(#000) ); /* webkit老式语法 可支持较低版本的Android手机 */
-webkit-linear-gradient(top, #F00, #0F0, #000); /*webkit新式语法 Safari 5.1+, Chrome 10+ */
Gecko引擎
-moz-linear-gradient(top, #F00 #0F0, #000); /* firfox 3.6+ */
Presto引擎
-o-linear-gradient(top, #F00, #0F0, #000); /* Opera 11.10+ */
/* IE */
-ms-linear-gradient(top, #ff6600, #339900); /* IE10 */
/* 注意:这一行必须写在最后 */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900); /* IE8 IE9 */
/* W3C标准 */
linear-gradient([<angle> | to <side-or-corner>], <color1>, <color2>, <color3>, …);
eg:
linear-gradient(45deg, #F00, #0F0, #000);
linear-gradient(to right top, #F00, #0F0, #000);
注意:W3C标准渐变方向要么用角度,要么用方向词但是要加 to
整理:
.lgred{
background-image:-webkit-gradient(linear, left top, right top, from(#F00), to(#000) );
background-image:-webkit-linear-gradient(top, #F00, #0F0, #000);
background-image:-moz-linear-gradient(top, #F00 #0F0, #000);
background-image:-o-linear-gradient(top, #F00, #0F0, #000);
background-image:-ms-linear-gradient(top, #F00, #0F0, #000);
background-image:linear-gradient(to top, #F00, #0F0, #000);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#F00, endColorStr=#000);
}
-webkit-gradient(linear, left top, right top, from(#F00), to(#000) ); /* webkit老式语法 可支持较低版本的Android手机 */
-webkit-linear-gradient(top, #F00, #0F0, #000); /*webkit新式语法 Safari 5.1+, Chrome 10+ */
Gecko引擎
-moz-linear-gradient(top, #F00 #0F0, #000); /* firfox 3.6+ */
Presto引擎
-o-linear-gradient(top, #F00, #0F0, #000); /* Opera 11.10+ */
/* IE */
-ms-linear-gradient(top, #ff6600, #339900); /* IE10 */
/* 注意:这一行必须写在最后 */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900); /* IE8 IE9 */
/* W3C标准 */
linear-gradient([<angle> | to <side-or-corner>], <color1>, <color2>, <color3>, …);
eg:
linear-gradient(45deg, #F00, #0F0, #000);
linear-gradient(to right top, #F00, #0F0, #000);
注意:W3C标准渐变方向要么用角度,要么用方向词但是要加 to
整理:
.lgred{
background-image:-webkit-gradient(linear, left top, right top, from(#F00), to(#000) );
background-image:-webkit-linear-gradient(top, #F00, #0F0, #000);
background-image:-moz-linear-gradient(top, #F00 #0F0, #000);
background-image:-o-linear-gradient(top, #F00, #0F0, #000);
background-image:-ms-linear-gradient(top, #F00, #0F0, #000);
background-image:linear-gradient(to top, #F00, #0F0, #000);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#F00, endColorStr=#000);
}