1. 線性漸變：

   linear-gradient(方向或角度,第一中顏色,第二種顏色,……);

　　　　　　方向： top、left、right、tottom，並在使用是前面添加 to；

　　　　　　　如： linear-gradient(to left,red,yellow);

　　　　　　　　　　　linear-gradient(to left bottom,red,yellow);

　　　　　　角度： 0-360單位deg，0deg對應top、90deg對應right、180deg對應bottom、360deg對應left；

　　　　　　　　如：　linear-gradient(45deg,red,yellow);

1. 徑向漸變：從元素的中心向四周放射性漸變

   radial-gradient([形狀 大小 at 位置],顏色值,顏色,……);

   形狀：circle（圓形）、ellipse（橢圓形，默認值）；

　　　　　　　　如：　radial-gradient(circle, red, yellow);

　　　　　　大小：可以使用百分比（如：50%）或長度（如：50px）；

　　　　　　　　如： radial-gradient(45px, red, yellow);

　　　　　　　　　　以下代碼為：橫向漸變直徑為45px，縱向漸變直徑為20px；

　　　　　　　　　　radial-gradient(45px 20px, red, yellow);

　　　　　　位置：center(默認值)、 top、left、right、tottom，前面添加 at ；

　　　　　　　　如：radial-gradient(at top, red, yellow);

　　　　　　　　　　 radial-gradient(at top left, red, yellow);

以上兩種漸變顏色列表：

• 兩個或多個顏色的組合，使用逗號分隔；
• 可以使用：關鍵字（如：red）、十六進制（#ffffff）、rgb、rgba、hsl、hsla

如果那裏寫的不對，或者不夠好的請指出。謝謝

漸變效果