这篇文章介绍css3提供的新特性,渐变效果。
渐变效果是background-image属性的一个值,语法格式如下:
其中,方位为可选参数,起始色与末尾色为必选参数,如果不指定方位参数,默认的渐变由上往下。
可以在linear-gradient内部配置多个颜色值来实现多色渐变效果,请看下面的实例:
渐变配合rgba颜色选择器可以实现图像的层次效果,请看下面的实例:
配合基准线的设置,平铺渐变能够实现从起始的颜色基准线位置到结束的颜色基准线位置的重复平铺,请看下面的实例:
放射性渐变与普通渐变稍有区别,顾名思义,这种渐变会呈现放射性效果,而不是线性效果,先来看几个概念。
closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边;
closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角;
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边;
farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角;
除了颜色值1和2是必选参数外,其他都是可选参数。
下面用一个实例来演示上面这些概念:
