首页 > html5+css > css基础知识 > CSS中背景颜色渐变
2016
12-16

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);

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。