1.渐变
指的是:颜色从一个方向到另一个方向进行改变,从一个角度到另外一个角度进行改变
线性渐变:方向
径向渐变:从中心向四周进行改变
背景产生的====由浏览器进行加载显示的====比较均匀,兼容性比较强的,使用背景图片平铺的话,有可能会失真
1)线性渐变(实际开发应用频率会比较高)
background:linear-gradient(to,方向词,col1,col2,col3)
取值:linear-gradient=====线性渐变
to 方向词======到达某一个方向
to top=========到达上边,从下边开始的
col1============开始颜色
col3============结束颜色
方向的取值问题:
1)取值可以为:to 方向词 到达一个方向
2)不跟方向====从上到下 to bottom
3)到达某一个对角:to top left = left top = 到达左上角
4)线性渐变是按照一个角度进行渐变的:一个度数 deg
5)不跟方向,不跟角度,不跟度数的话,默认是多少度?
to bottom = 180deg/-180deg
2)径向渐变
颜色从中心点向四周进行扩散
background:redial-gradient(center,shape,size,col1,col2,col3)
center======渐变中心