CSS3 线性渐变 linear-gradient的使用 使用角度加透明度设置渐变

最近做页面的时候用到了线性渐变, linear-gradient    现在来总结一下用法 回顾记录一下

为一个元素设置渐变很简单

#grad {

    background:linear-gradient(red,yellow,blue)
}

上面css代码显示效果如下

渐变方向默认是从上到下

也可以指定方向与角度

从左上角到右下角的线性渐变

#demo{
 background: linear-gradient(to bottom right, red , blue);
}

也可以设置角度 设置透明度

#demo{
background:linear-gradient(45deg, red 20%, blue 100%)
}

效果如下

 

 

 

角度的坐标系 与平面直角坐标系一致  90度为上下,45度为正方形对角