网站地图    收藏   

主页 > 专题教程 > css >

linear-gradient()

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

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

CSS linear-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线性渐变的浏览器兼容性列表如下:

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论