gradient设置上下渐变_CSS3中元素背景的 gradient 渐变属性

前段时间我写过一篇：CSS中background属性总结 整理了background的常用属性。

在CSS3中 background-image 还有一个 gradient 属性——渐变。

渐变大体分两种：

1、线性渐变：linear-gradient

线性渐变的用法是：linear-gradient(direction方向/角度,color1,color2......);

单向渐变：从一个水平或者垂直方向到另一个方向background-image: linear-gradient(to right,red,blue); /*从左到右 由红到蓝渐变*/

效果如下：

单向渐变：从一个角到另一个相对的角background-image: linear-gradient(to right top,red,blue); /*从左下角到右上角*/

效果如下：

多色渐变：可以有多个颜色的值background-image: linear-gradient(to right top,red,orange,yellow,green,cyan,blue,purple); /*从左下到右上 颜色。。。*/

效果如下：

重复渐变：两种颜色重复渐变background-image: repeating-linear-gradient(to left,black 30px,white 60px); /*从右向左渐变，黑色渐变30px，白色从30px开始到60px，总共占60px，重复出现，后面的值要比前面的大。*/

效果如下：

角度渐变：渐变倾斜的角度background-image: linear-gradient(45deg,white,blue); /*角度45度 由白到蓝*/

效果如下：

2、径向渐变：radial-gradient

径向渐变：radial-gradient(shape形状,color1,color2......);

径向渐变的形状有2种：ellipse椭圆形(默认);和circle圆形;

圆形渐变：background-image: radial-gradient(circle,white,blue); /*形状：圆形 内部颜色 外部颜色*/

效果如下：

可以设置圆心位置：background-image: radial-gradient(circle at left bottom,white,blue); /*形状：圆形 at left bottom圆心的位置 内部颜色 外部颜色*/

效果如下：