渐变:通过渐变可以设置一些复杂的背景颜色,可以从实现一个颜色向其他颜色过渡的效果
渐变是图片,通过 background-image设置
一、渐变色
可选值
1: linear-gradient [‘ɡreidiənt],线性渐变,颜色沿着一条直线发生变化
语法:linear-gradient(方位,颜色1,颜色2)
参数1:表示方位,(可选值,不写默认是to bottom)
(1)to left,to right, to bottom, to top
(2)xxxdeg 表示角度,度数,会更灵活
(3)turn 表示圈 .5turn
参数2:颜色1
参数3:颜色2
注意:可以写多个颜色,默认情况下,颜色是均分占比的,也可以手动的指定渐变的分布情况,例如:background-image:linear-gradient(red 50px,yellow) ,颜色后直接跟占比
2:repeating-linear-gradient()可以平铺的线性渐变
background-image: repeating-linear-gradient(yellow 0px, red 50px);
参数跟linear-gradient是一样的
参数2-参数1,中间部分是渐变的颜色,拿总高度/差值,就是颜色重复出现的次数
二、放射渐变 —经向渐变(放射性的效果)
radial-gradient() [‘reidiəl] [‘ɡreidiənt]
语法:background-image: radial-gradient();
默认情况下,圆心是根据元素的形状来计算的
正方形–>圆形
长方形–>椭圆型
参数1:圆心的形状
(1)circle圆形,ellipse椭圆,
(2)设置的大小 at 位置==>像素1 像素2 at 0px 0px
参数2:颜色1
参数3:颜色2
······
Document .box1 {width: 200px;height: 200px;/* background-image:linear-gradient( red,yellow) ; */background-image: repeating-linear-gradient(yellow 0px, red 100px);background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);}