如何使用css技術(shù)的線性漸變來設(shè)計(jì)彩虹

這篇文章主要為大家展示了“如何使用css技術(shù)的線性漸變來設(shè)計(jì)彩虹”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用css技術(shù)的線性漸變來設(shè)計(jì)彩虹”這篇文章吧。

在網(wǎng)頁設(shè)計(jì)中，有時(shí)候會(huì)需要用到漸變效果，漸變可以創(chuàng)建出類似于彩虹的視覺圖案效果，在沒有CSS3之前，為了顯示一個(gè)漸變需要專門制作一個(gè)圖片，這種不法不但不靈活還增加請(qǐng)求數(shù)，而CSS3可以輕松實(shí)現(xiàn)網(wǎng)頁漸變效果，用于做漸變背景、漸變導(dǎo)航、配合CSS3動(dòng)畫做特效等。在CSS3中，Gradient（漸變）分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。CSS顏色線性漸變的語法在各種瀏覽器里的實(shí)現(xiàn)稍微有些不同，但最后是統(tǒng)一標(biāo)準(zhǔn)的：

CSS顏色線性漸變的語法

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

第一個(gè)參數(shù)是漸變起始點(diǎn)或角。第二個(gè)參數(shù)是一種顏色停止點(diǎn)(color stops)。至少需要兩種顏色(起點(diǎn)和終點(diǎn))，你可以添加任意種顏色來增加顏色漸變的豐富程度。對(duì)顏色停止點(diǎn)的定義可以是一種顏色，或一種顏色加一個(gè)百分比：

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

因?yàn)?span lang="EN-US">CSS漸變色(Gradients)技術(shù)是CSS3里比較新的技術(shù)，屬于高級(jí)的CSS功能，于是每種瀏覽器對(duì)這種技術(shù)的實(shí)現(xiàn)都添加了一些自己的特色。

我們來做一個(gè)彩虹：

/*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);}

關(guān)于IE對(duì)CSS顏色漸變技術(shù)的支持做一些說明：在早期IE是使用filter和-ms-filter語法實(shí)現(xiàn)漸變色，而最新版的IE里改為了-ms-linear-gradient語法。我們可以使用CSS里條件判斷語句來解決這個(gè)問題：

<!--[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技術(shù)的線性漸變來設(shè)計(jì)彩虹”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！