CSS3如何实现重复线性渐变效果

这篇文章将为大家详细讲解有关CSS3如何实现重复线性渐变效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、自适应网站建设、程序开发、微网站、成都小程序开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站建设、成都网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。

重复线性渐变效果,有的朋友可能听起来比较陌生,但是在我们日常生活中也是常见的一种渐变效果。

代码示例如下:





    CSS3创建重复线性渐变效果
    


重复线性渐变

重复线性效果如下图:

CSS3如何实现重复线性渐变效果

如图所示,蓝白条间隔的线性渐变效果。从-45 度线性渐变(也就是右下角45度),从#4b6c9c到#5ac4ed以及白色到白色的过渡重复渐变。

css3中repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"。

语法:

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

CSS3如何实现重复线性渐变效果

注: Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。

关于CSS3如何实现重复线性渐变效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享名称:CSS3如何实现重复线性渐变效果
网址分享:http://pwwzsj.com/article/pepdpi.html