如何使用css技术的线性渐变来设计彩虹

这篇文章主要为大家展示了“如何使用css技术的线性渐变来设计彩虹”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用css技术的线性渐变来设计彩虹”这篇文章吧。

在网页设计中，有时候会需要用到渐变效果，渐变可以创建出类似于彩虹的视觉图案效果，在没有CSS3之前，为了显示一个渐变需要专门制作一个图片，这种不法不但不灵活还增加请求数，而CSS3可以轻松实现网页渐变效果，用于做渐变背景、渐变导航、配合CSS3动画做特效等。在CSS3中，Gradient（渐变）分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同，但最后是统一标准的：

CSS颜色线性渐变的语法

background-image:linear-gradient(<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比：

/*color-stop(percentage/amount,color)*/color-stop(0.20,red)

因为CSS渐变色(Gradients)技术是CSS3里比较新的技术，属于高级的CSS功能，于是每种浏览器对这种技术的实现都添加了一些自己的特色。

我们来做一个彩虹：

/*example3-linearrainbow*/#example3   {/*fallback*/background-color:#063053;/*chrome2+,safari4+;multiplecolorstops*/background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.20,red),color-stop(0.40,green),color-stop(0.6,blue),color-stop(0.8,purple),color-stop(1,orange));/*chrome10+,safari5.1+*/background-image:-webkit-linear-gradient(red,green,blue,purple,orange);/*firefox;multiplecolorstops*/background-image:-moz-linear-gradient(top,red,green,blue,purple,orange);/*ie10*/background-image:-ms-linear-gradient(red,green,blue,purple,orange);/*opera11.1*/background-image:-o-linear-gradient(red,green,blue,purple,orange);/*The"standard"*/background-image:linear-gradient(red,green,blue,purple,orange);}

关于IE对CSS颜色渐变技术的支持做一些说明：在早期IE是使用filter和-ms-filter语法实现渐变色，而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题：

<!--[ifltIE10]><style>.gradientElement{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873')";}</style><![endif]-->

以上是“如何使用css技术的线性渐变来设计彩虹”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！