CSS中背景颜色渐变

一、linear-gradient：背景颜色线性渐变。 linear-gradient(方位, 起始色, 末尾色)

方位：可选参数，渐变的方位。可以使用的值有：to top、to top right、to right、to bottom、to bottom left、to left、to top left。

起始色必选参数，颜色值

末尾色必选参数，颜色值

通过：top、left、right、bottom这四组实现的渐变方向有时比较单一，我们可以使用以角度单位的数值来设置方位。比如 0 度(0deg)相当于 to top;角度会沿逆时针方向随着你的角度的增加而增加(可以是负值)。

如： background-image: linear-gradient(45deg,orange,green);

多色线性渐变：background-image: linear-gradient(-45deg,orange,green,blue,red);

通过百分比(也可以用像素等单位)设置多色线性位置：

ackground-image: linear-gradient(-45deg, orange 0%, green 20%, blue 40%, red 100%);

结合背景，并使用透明渐变实现强大层次感：

background-color:red;

background-image: linear-gradient(to top right, rgba(0,0,0,0.6), rgba(0,0,0,0));

重复渐变属性值：background-image:repeating-linear-gradient(to top, orange 10px, green 30px);

二、radial-gradient：径向渐变，也叫做放射性渐变：从一个点向四周发散的方式扩展

radial-gradient(形状发散方向发散距离,起始色起始色大小,末尾色起始色大小);

其中起始色和末尾色为必须属性，其他为可选属性。

方位：可选参数，径向的方位。可以使用的值有：像素、百分比、固定值，或复合搭配使用

形状：circle：圆形; ellipse：椭圆形，默认值

发散方向： top 从顶部发散 left 从左侧发散 right 从右侧发散

bottom 从底部发散 center 从中间发散

发散距离：可以用像素表示半径，但不接受百分比，也可以使用下面提供的关键词。

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

同样，也有重复背景方式：background-image:repeating-radial-gradient(circle 50px, orange, green);

最后编辑：2016-12-16

作者：qingheluo

这个作者貌似有点懒，什么都没有留下。