渐变属性(background-image)全解析

背景图线性渐变

线性渐变

background-image:linear-gradient(red,blue);	默认是从上往下渐变。
background-image:linear-gradient(to  方向词,red,blue); background-image:带CSS3浏览器前缀-linear-gradient( 方向词,red,blue);	可以设置渐变方向：从上往下，从下往上，从左往右，从右往左。
background-image:linear-gradient(to  水平的  垂直的,red,blue); background-image:带CSS3浏览器前缀-linear-gradient(水平的  垂直的,red,blue);	斜对角渐变。
background-image:linear-gradient(80deg,red,blue);	指定角度位置渐变。
background-image:linear-gradient(80deg,red 30%,blue  80%);	控制渐变范围，从0%-30%是纯红色，从30%-80%是红色到蓝色渐变，80%-100%纯蓝色。
background-image:repeating-linear-gradient(80deg,red 30%,blue  80%);	重复的线性渐变。

代码展示：

       <style> 
        div:nth-of-type(1){
            /* 默认从上到下 */
            background-image: linear-gradient(red,yellow);
        }
        div:nth-of-type(2){
            /* 从下到上 */
            background-image: linear-gradient(to top,red,yellow);
        }
        div:nth-of-type(3){
            /* 从左到右 */
            background-image: linear-gradient(to left,red,yellow);
        }
        div:nth-of-type(4){
            /* 从右到左 */
            background-image: linear-gradient(to right,red,yellow);
        }
        div:nth-of-type(5){
            /* 从右下到左上 */
            background-image: linear-gradient(to top left,red,yellow);
        }
        div:nth-of-type(6){
            /* 从左上到右下 */
            background-image: linear-gradient(to bottom right,red,yellow);
        }
        div:nth-of-type(7){
            /* 120度方向 */
            background-image:linear-gradient(120deg,red,blue);
        }
        div:nth-of-type(8){
            /* 0-20%是红色，20%-80%为渐变区域，80%-100%为蓝色*/
            background-image:linear-gradient(80deg,red 20%,blue 80%);
        }
        div:nth-of-type(9){
            /* 重复线性渐变*/
            background-image:repeating-linear-gradient(80deg,red 30%,blue  80%);
        }
         </style> 

运行结果：

背景图径向渐变

径向渐变

background-image:radial-gradient(red,blue);	默认是从里往外渐变,默认是椭圆 想要改变形状在颜色前面添加单词circle 可以修改为正圆
background-image:radial-gradient(at  方向词,red,blue);	设置渐变圆心位置
background-image:radial-gradient(at  水平的  垂直的,red,blue); background-image:带CSS3浏览器前缀-radial-gradient(水平的  垂直的,red,blue);	设置渐变圆心位置，水平和垂直可以是单词，也可以是数字+px
background-image:radial-gradient(red 30%,blue  80%);	控制渐变范围，从0%-30%是纯红色，从30%-80%是红色到蓝色渐变，80%-100%纯蓝色。
background-image:repeating-radial-gradient(red 30%,blue  80%);	重复的渐变

 代码展示:

    <style>
        div:nth-of-type(1) {
            /* 默认椭圆 */
            background-image: radial-gradient(red, blue);
        }
        div:nth-of-type(2) {
            /* 更改为正圆 */
            background-image: radial-gradient(circle,red, blue);
        }
        div:nth-of-type(3) {
            /* 圆心在下 */
            background-image:radial-gradient(at bottom,red,blue);
        }
        div:nth-of-type(4) {
            /* 圆心在上 */
            background-image:radial-gradient(at top,red,blue);
        }
        div:nth-of-type(5) {
            /* 圆心在左 */
            background-image:radial-gradient(at left,red,blue);
        }
        div:nth-of-type(6) {
            /* 圆心在右 */
            background-image:radial-gradient(at right,red,blue);
        }
        div:nth-of-type(7) {
            /* 0-30%是红色，30%-80%为渐变区域，80%-100%为蓝色*/
            background-image:radial-gradient(red 30%,blue  80%);
        }
        div:nth-of-type(8) {
            /* 重复渐变 */
            background-image:repeating-radial-gradient(red 30%,blue  80%);
        }
    </style>

运行结果：

码字不易，点个赞吧~~~