线性渐变
/*
渐变不是一个新的属性, 而是一个取值
默认情况下线性渐变是从上至下的渐变
我们可以通过在颜色的前面添加to xxx修改渐变的方向
to top
to left
to right
*/
/*background-image: linear-gradient(to top right, red, blue);*/
/*除了可以通过关键字控制渐变的方向以外, 还可以通过角度来控制渐变的方向, 角度是按照顺时针旋转*/
/*background-image: linear-gradient(200deg, red, blue);*/
/*30%以前不渐变, 从30%开始慢慢渐变到下一个颜色*/
/*background-image: linear-gradient(red 30%, blue);*/
/*background-image: linear-gradient(red 0%, red 30%,blue 30%, blue 60%, green 60%, green 100%);*/
background-image: linear-gradient(to left ,red 0%, red 30%,blue 30%, blue 60%, green 60%, green 100%);
径向渐变
/*可以在颜色前面添加at和关键字来指定从什么位置开始渐变*/
/*background-image: radial-gradient(at left top,red, blue);*/
/*除了可以通过关键字指定从什么位置开始渐变以外, 还可以通过指定具体像素来指定从什么位置开始渐变*/
/*background-image: radial-gradient(at 50px 50px,red, blue);*/
/*也可以在颜色前面直接加上一个具体的像素来指定渐变的范围*/
/*background-image: radial-gradient(150px ,red, blue);*/
/*
编写规范:
如果既要指定扩散的范围, 又要指定起始位置, 那么把扩散的范围写在前面, 而起始位置写在后面
*/
background-image: radial-gradient(50px at right bottom ,red, blue);
