CSS渐变

线性渐变

background: linear-gradient(0deg, rgba(255,0,0,0), rgba(255,0,0,1));

deg:

重复线性渐变

background: repeating-linear-gradient(45deg,yellow 10px, green 90px);

径向渐变

background: radial-gradient(circle, red, yellow, green);

circle 是圆形，ellipse 是椭圆形

不同尺寸的径向渐变

background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
有如下几种

closest-side
farthest-side
closest-corner
farthest-corner

重复的径向渐变

background: repeating-radial-gradient(red, yellow 10%, green 15%);

边框渐变色

直角渐变色

border-image: -webkit-linear-gradient(red,yellow) 30 30;
border-image: -moz-linear-gradient(red,yellow) 30 30;
border-image: linear-gradient(red,yellow) 30 30; 

圆角渐变色(border-image无法对圆角设置渐变,方式为在内部在建一个div以父级padding边长作为渐变)

background-image: -webkit-linear-gradient(top, #eaa143 0%, #efba89 50%, #ffee67 90%);
background-image: -moz-linear-gradient(top, #eaa143 0%, #efba89 50%, #ffee67 90%);
background-image: linear-gradient(top, #eaa143 0%, #efba89 50%, #ffee67 90%);