css渐变色

css渐变色

渐变色只会作用域背景图片background-image这个属性

1. 线性渐变

 /* <!-- 1-线性渐变 --> 
                参数1——角度/ to 方向  （默认方向是从上到下）
                参数2——开始的颜色
                参数3——结束的颜色
*/
background-image: linear-gradient(to right,red,blue);
background-image: linear-gradient(45deg,red,blue);

2. 径向渐变

/* <!-- 2-径向渐变 --> 
                参数——开始颜色,结束颜色
            */
background-image: radial-gradient(white,black,white,black);
background-image: radial-gradient(red,blue,green,yellow)

3. 重复渐变

 1. 重复线性渐变
            /*  参数1——角度/ to 方向
               参数2——第1个颜色 开始位置
               参数3——第1个颜色 结束位置
               参数4——第2个颜色 开始位置
               参数5——第2个颜色 结束位置

               2. 重复径向渐变
               参数1——第1个颜色 开始位置
               参数2——第1个颜色 结束位置
               参数3——第2个颜色 开始位置
               参数4——第2个颜色 结束位置

            */
background-image: repeating-linear-gradient(to right,red 0px, red 10px,blue 0px,blue 30px);
background-image: repeating-radial-gradient(white 0px, white 10px,black 0px,black 30px);```