渐变and倒影and遮罩层mask

background:linear-gradient(to top,red,blue);
background:linear-gradient(135deg,red,blue);   //方向可以是角度
background:linear-gradient(135deg,red 30%/100px,blue 40%/120px);  //渐变的平铺区域是从30%~40%/100px~120px;
background:-webkit-linear-gradient(bottom,red,blue);  //渐变的兼容处理

background:radial-gradient(red,blue);  //方向不可以是角度，圆的旋转无意义，默认从元素中心点开始平铺，即center
background:radial-gradient(circle,red 30%/100px,blue 40%/120px); //长方形的径向渐变是椭圆，可以设置方向为circle来实现圆形径向渐变 
background:-webkit-radial-gradient(red,blue);  //渐变的兼容处理