线性渐变:linear-gradient()

        值：<br />                1.只有颜色，默认按照从上至下的顺序进行渐变。<br />                2.在颜色前面添加to 方向(top，left，right，bottom):往哪个方向去进行渐变(改变背景渐变的方向)。<br />                3.在颜色前面添加to 方向1 方向2：往哪个角进行背景渐变(斜角背景渐变)。<br />                4.在颜色后面添加百分比：百分比的颜色到宽度或高度的百分之多少的位置。<br />                    例如：linear-gradient(to left,royalblue 20%,yellow 40%,#ff6700 80%);<br />                        royalblue：到宽度的20%的位置结束。<br />                        yellow：到宽度的40%的位置结束。<br />                        #ff6700：到宽度的80%的位置结束。<br />                        注意：由于最后一个颜色的位置只到达80%的位置，所以剩下的20%以最后一个颜色补全。<br />                5.在颜色前面添加0deg:按照角度进行背景渐变(改变背景渐变的方向)。<br />             /* background-color: royalblue; */<br />           

background:linear-gradient(0deg,royalblue,yellow,#ff6700);

重复线性渐变：repeating-linear-gradient();

        通过最后一个颜色的百分比控制，背景渐变重复多少次。<br />          

 background: repeating-linear-gradient(to right top,royalblue,yellow,#ff6700 10%);

径向渐变:radial-gradient()

            默认情况下渐变从中心点出发，以椭圆形往外扩散，直到元素的最远角落。<br />                百分比：从中心点出发，到百分之多少的位置结束。<br />                circle:以圆形进行背景渐变。

 background: radial-gradient(circle, royalblue 20%,violet,#ff6700 80%);

重复径向渐变：repeating-radial-gradient()

        通过最后一个颜色的百分比控制，背景渐变重复多少次。

background: repeating-radial-gradient(circle,royalblue,violet,#ff6700 5%);