成都高端網(wǎng)站開發(fā)CSS知識

2022-07-30    分類： 網(wǎng)站建設(shè)

成都高端網(wǎng)站開發(fā) CSS3線性漸變指南  漸變是CSS3中很棒的色彩功能?，F(xiàn)在，我們不僅可以添加一種顏色，還可以在一個聲明塊中添加多種顏色組合，而無需依賴圖像，這可以減少我們網(wǎng)站中的HTTP請求，從而使網(wǎng)站加載速度更快。

如果您在CSS3中使用過漸變，則您可能熟悉兩種方法：徑向漸變和線性漸變。今天的帖子將是關(guān)于后者的。

創(chuàng)建漸變
正如規(guī)范說的，CSS3中的漸變是一幅圖像，它沒有像其他新功能一樣具有特殊的屬性，因此它是使用background-image屬性來聲明的。

如果我們看一下漸變的完整語法，它看起來有點(diǎn)用力過度，這可能會導(dǎo)致某些人感到困惑。


div {
 background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
 background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
 background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
 background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
 background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
因此，讓我們一一深入研究語法的每個部分，以使事情變得更清楚。

首先，使用linear-gradient()函數(shù)聲明線性梯度。該函數(shù)具有三個主要值。第一個值定義梯度的起始位置。您可以使用描述性關(guān)鍵字，例如top從頂部開始漸變；

1個
2
3
div {
 background-image: linear-gradient(top, #FF5A00, #FFAE00); 
}  
上面的代碼段是W3C用來創(chuàng)建漸變的正式版本。它實(shí)際上更簡單，也很容易解釋，并且還會創(chuàng)建以下漸變。


成都高端網(wǎng)站開發(fā)漸變頂部
您也可以使用bottom相反的方法，否則使用rightand left。

我們還可以使用對角線漸變angle degree作為起始位置來創(chuàng)建對角線漸變。這是一個例子：

1個
2
3
div {
 background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
}
上面的代碼段將創(chuàng)建以下顏色漸變：

斜對角線
函數(shù)的第二個值將告訴第一個顏色信息及其停止位置，以百分比表示。停止位置實(shí)際上是可選的；瀏覽器足夠聰明來確定正確的位置，因此當(dāng)我們不指定第一種顏色的停止位置時，瀏覽器將0%作為默認(rèn)顏色。

并且，下一個值是第二個顏色組合。它的工作方式與之前的值相同，僅當(dāng)它是最后應(yīng)用的顏色且我們未指定停止位置時，才將值100%用作默認(rèn)值?，F(xiàn)在，讓我們看下面的示例：

1個
2
3
div {
 background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
上面的代碼段將創(chuàng)建一個漸變，就像我們之前看到的一樣（沒有區(qū)別），但是現(xiàn)在我們指定了顏色停止位置；

成都高端網(wǎng)站開發(fā)漸變頂部
現(xiàn)在讓我們更改顏色stop，這一次我們將指定50%第一種顏色和51%第二種顏色，然后看看結(jié)果如何。

1個
2
3
div {
 background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
}
梯度停止
透明度
transparency也可以漸變創(chuàng)建。要創(chuàng)建效果，我們需要將顏色hex轉(zhuǎn)換為rgba模式并降低Alpha通道。

1個
2
3
div {
 background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));
} 
上面的代碼段會將色彩強(qiáng)度降低20%，漸變會像這樣：

漸變透明
多種顏色
如果要添加更多顏色，只需用逗號定界符在其他顏色旁邊添加顏色，然后讓瀏覽器確定每種顏色的停止位置。

1個
2
3
div {
 background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}
上面的代碼段將創(chuàng)建以下彩虹。

成都高端網(wǎng)站開發(fā)漸變彩虹
瀏覽器兼容性
不幸的是，在撰寫本文時，當(dāng)前所有的瀏覽器都尚未支持標(biāo)準(zhǔn)語法。他們還需要供應(yīng)商前綴（-webkit-，-moz-，-ms-和-o-）。因此，這就是為什么完整的語法如下所示：

div {
 background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
 background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
 background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
 background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
 background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
另一方面，Internet Explorer（特別是版本9和更低版本）與標(biāo)準(zhǔn)相差甚遠(yuǎn)。IE9及更低版本中的漸變用聲明filter，因此，如果要在這些瀏覽器上添加漸變，則必須編寫如下代碼；

1個
2
3
div {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);
}
它filter有其局限性：首先，它不允許添加三種以上的顏色，并且創(chuàng)建透明效果也有些棘手-不允許rgba，但是IE filter使用#ARGB；

1個
2
3
div {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);
}
這里是為了幫助一個工具，你轉(zhuǎn)換rgba到#ARGB。

演示版
下載源
更快地編寫語法
如您在上面看到的，為了保持跨瀏覽器的梯度兼容性，我們需要再添加五行效率低下的代碼。

我們可以采取許多方法來簡化任務(wù)。例如使用Prefix-free，Prefixr，LESS或Sass來幫助編譯代碼，但最重要的是，我們建議使用ColorZilla Gradient這個工具。該工具將簡單地生成漸變所需的所有代碼，以使其在所有瀏覽器中均有效。

最后的話
今天，我們在創(chuàng)建漸變方面進(jìn)行了很多討論，我們研究了語法的每個部分，創(chuàng)建透明效果并保持了瀏覽器兼容性。因此，在這一點(diǎn)上，我們希望您已經(jīng)對該主題有了更好的理解。

我們計劃在以后的文章中仍然打算在CSS3 Gradients上探索很多東西，所以請繼續(xù)關(guān)注Hongkiat.com。最后，感謝您閱讀本文，我們希望您喜歡它。

當(dāng)前題目：成都高端網(wǎng)站開發(fā)CSS知識
URL地址：http://www.muchs.cn/news36/183486.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、響應(yīng)式網(wǎng)站、定制開發(fā)、關(guān)鍵詞優(yōu)化、商城網(wǎng)站、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司