CSS之渐变效果

1 线性渐变

语法1：

E {background-image: linear-gradient(color, color);}

可以包含多个颜色点。

语法2：

E {background-image: linear-gradient(to top, color, color);}

E {background-image: linear-gradient(to right bottom, color, color);}

语法3：

E {background-image: linear-gradient(45deg, color, color);}

语法4：

E {background-image: linear-gradient(45deg, color percent, color);}

重复线性渐变

语法：

E {background-image: repeating-linear-gradient(color, color 25%);}

2 放射性渐变

语法1：

E {background-image: radial-gradient(color, color);}

可以包含多个颜色点。

语法2：

E {background-image: radial-gradient(keyword, color, color);}       /* keyword: ellipse(默认值), circle */

语法3：

E {background-image: radial-gradient(circle at 100% 50%, color, color);}

E {background-image: radial-gradient(circle 50px, color, color);}

E {background-image: radial-gradient(keyword, circle at 30% 60%, color, color);}      /* keyword: farthest-corner(默认值), farthest-side, closest-side, closest-corner */

重复放射性渐变

语法：

E {background-image: repeating-radial-gradient(circle, color, color 20%);}