建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容介紹了“CSS3中線性顏色漸變的實現(xiàn)方法”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
10余年的濮陽縣網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整濮陽縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“濮陽縣網(wǎng)站設(shè)計”,“濮陽縣網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。
為了顯示一個漸變而專門制作一個圖片的做法是不靈活的，而且很快會成為一種不好的做法。但是遺憾的是，截至寫這篇文章，可能還必須這樣做，但是希望不會持續(xù)太久。多虧Firefox 和Safari/Chrome，我們現(xiàn)在可以使用最少的努力實現(xiàn)強(qiáng)大的漸變。在本文中，我們將展示CSS漸變的簡單實現(xiàn)以及該屬性在Mozilla和webkit內(nèi)核瀏覽器中的不同。
Webkit
盡管Mozilla和Webkit通常對CSS3屬性采取同樣的語法，但是對于漸變，他們很不幸的不能達(dá)成一致。Webkit是第一個支持漸變的瀏覽器內(nèi)核，它使用下面的結(jié)構(gòu)：
CSS Code復(fù)制內(nèi)容到剪貼板
/* 語法，參考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(
, [, ]?, [, ]? [, ]*) /* 實際用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
不要擔(dān)心這些語法會讓你看花眼，我也是這樣的！只要記得我們需要用一個逗號來隔開這個參數(shù)組。
漸變的類型? (linear)
漸變開始的X Y 軸坐標(biāo)(0 0 – 或者left-top)
漸變結(jié)束的X Y 軸坐標(biāo)(0 100% 或者left-bottom)
開始的顏色? (from(red))
結(jié)束的顏色? (to(blue))
Mozilla
Firefox，從3.6版本才開始支持漸變，更喜歡和Webkit略微不同的語法。
CSS Code復(fù)制內(nèi)容到剪貼板
/* 語法，參考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */
-moz-linear-gradient( [
|| ,]? , [, ]* ) /* 實際用法*/
background: -moz-linear-gradient(top, red, blue);
請注意我們將漸變的類型——linear——放到了屬性前綴中了
漸變從哪里開始? (top – 我們也可以使用度數(shù)，比如-45deg)
開始的顏色? (red)
結(jié)束的顏色? (blue)
Color-Stops
如果你不需要從一個顏色到另一個顏色的100%漸變怎么辦？這就是color stop起作用的時候了。一個普遍的設(shè)計技術(shù)是使用一個較短而細(xì)微的漸變，比如：
注意頂部的淺灰色到白色的細(xì)小的漸變
在過去，標(biāo)準(zhǔn)的做法就是制作一個圖片，并將其設(shè)為一個元素的背景圖片，然后讓其水平平鋪。然而使用CSS3，這是個小Case。
CSS Code復(fù)制內(nèi)容到剪貼板
background: white; /* 為較舊的或者不支持的瀏覽器設(shè)置備用屬性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white)); border-top: 1px solid white;
這次，我們讓漸變結(jié)束于8%，而不是默認(rèn)的100%。請注意我們也在頭部采用了一個邊框，以形成對比。這很常用。
如果我們想要添加多一種(幾種)顏色，我們可以這樣做：
CSS Code復(fù)制內(nèi)容到剪貼板
background: white; /* 備用屬性 */ background: -moz-linear-gradient(top, #dedede, white 8%, red 20%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
對于-moz 版本，我們定義，從元素的20%的高度的地方開始是紅色。
而對于-webkit，我們使用color-stop，采用兩個參數(shù)：哪里開始停止，使用哪種顏色。
“CSS3中線性顏色漸變的實現(xiàn)方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
本文名稱：CSS3中線性顏色漸變的實現(xiàn)方法
網(wǎng)頁URL：http://fisionsoft.com.cn/article/jhpphg.html
