当前位置主页 > 资料库 > 前端教程 > linear-gradient() | CSS属性参考

linear-gradient() | CSS属性参考

2016-11-08

CSS linear-gradient()函数用来创建一个线性渐变。一个渐变数据类型<gradient>实际上是一张图片,它由两种或更多的颜色通过平滑渐进过渡形成。

线性渐变是指渐变颜色沿着一条轴线(水平或垂直)改变颜色,从起点到终点颜色进行顺序渐变。线性渐变的方向可以是水平或垂直方向,或者任意角度的方向。例如下面是一些线性渐变的示意图:

线性渐变

创建线性渐变

一个线性渐变可以由多种颜色组成。除了指定颜色的方向和角度之外,linear-gradient()接收一组color stop作为参数。color stop由一个颜色和一个可选的颜色位置组成:

linear-gradient(angle/direction, color stop, color stop, ...);

例如下面的代码指定一个从左相右,由黄色到紫色的线性渐变:

linear-gradient(to right, yellow, purple);

得到的结果如下图所示:

黄色到紫色的线性渐变

你可以为线性渐变添加更多的颜色,例如:

linear-gradient(to right, yellow, #009966, purple);

黄色到绿色到紫色的线性渐变

当指定了三种颜色之后,这三种颜色会平均分布在渐变线上,0%的地方是纯黄色,50%的地方是纯绿色,100%的地方是纯紫色,在三种颜色之间的区域是两种相应颜色的平滑过渡色。

如果你你想将上面例子中的绿色的开始位置设置在20%的地方,而不是默认的50%的地方,那么可以使用下面的CSS规则:

linear-gradient(to right, yellow, #009966 20%, purple);

得到下面的结果:

黄色到绿色到紫色的线性渐变-2

如果你想使得颜色之间的过渡变得锋利,那么可以使用下面的CSS规则:

linear-gradient(to right, yellow, yellow 20%, #009966 20%, #009966 80%, purple 80%, purple);

得到下面的结果:

黄色到绿色到紫色的线性渐变-3

官方语法

linear-gradient()线性渐变的官方语法为:

<linear-gradient> = linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]?
    <color-stop>[, <color-stop>]+
)
/* 其中 */
<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <percentage> | <length> ]?
在线演示

linear-gradient(to bottom right, yellow, deeppink, #006699);


linear-gradient(to right, yellow, #009966 20%, purple);


linear-gradient(to right, yellow, yellow 20%, #009966 20%, #009966 80%, purple 80%, purple);

浏览器支持

CSS3线性渐变的浏览器兼容性列表如下:

CSS3 渐变属性的浏览器兼容性列表

相关阅读
Previous:
上一篇:matrix3d() | CSS属性参考
Next:
下一篇:radial-gradient() | CSS属性参考

我要评论

返回顶部