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%);}