1. 程式人生 > >css實現漸變

css實現漸變

.gradient{
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#8ca0d3), to(#375a9a)); /** Chrome Safari **/
	background: -moz-linear-gradient(top, #8ca0d3, #375a9a); /** FireFox **/
	background: -o-linear-gradient(top, #8ca0d3, #375a9a);/** Opear **/ 
	background: -ms-linear-gradient(#8ca0d3 0%,#375a9a 100%);/** IE9 IE10 **/
 	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ca0d3',endColorstr='#375a9a',grandientType=0); /** IE8 **/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = #8ca0d3, endColorstr = #375a9a,grandientType=0);/** IE7 **/ 
}

引數解釋:

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