各浏览器的css线性渐变(linear-gradient)

Home / Article MrLee 2016-4-3 2527

現行漸變 首先看下示例 (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結束顏色
 
 
 
線性漸變 

 
 
 
垂直漸變
水平漸變

 

本文链接:https://www.it72.com/8772.htm

推荐阅读
最新回复 (0)
返回