漸變
有了漸變再也不用去切1px的圖再重復了..
-webkit- 是瀏覽器前綴, 表示特定瀏覽器對一個屬性還在實驗階段, 在這里順便寫下各個瀏覽器的前綴:
chrome/ safari -webkit-
firefox -moz-
IE -ms-
opera -o-
為了各個瀏覽器能夠識別, 我們要把每種前綴都要寫一遍... 對了, 只有自己瀏覽器能識別帶自己前綴的屬性.
background-image: -webkit-linear-gradient(top, red, blue);
要注意漸變是 background-image 而不是 background-color!
--------------------------------------------------------------------------------------------------
前綴有了, linear 表示線性, gradient 表示漸變.
第一個參數表示 從哪里開始(默認是 top), 有:top/ right/ bottom/ left 四個值(linear 時不能寫 center, 我還好死不死的試試, 然並卵0..0), 但可以組合使用: background-image: -webkit-linear-gradient(top left, red, blue); 表示從左上角開始.
還可以用度數表示,以下是 0 deg:
background-image: -webkit-linear-gradient(0deg, red, blue);
以下是90deg:
background-image: -webkit-linear-gradient(90deg, red, blue); 可以理解為逆時針旋轉90deg(誰會關心這個..).
--------------------------------------------------------------------------------------------------
第二個和第三個參數並非只可以有這倆, 看你想讓他漸變多少種顏色, 比如你可以這樣玩:
顏色參數不僅僅只寫顏色, 還可以設置從哪里個位置開始漸變這個顏色:
background-image: -webkit-linear-gradient(top left, red, blue 25%, yellow 90%); 這個百分數是相對於漸變的方向那個邊, 表示到這個位置時就已經完全變為該顏色, 說的麻煩, 看下圖:
--------------------------------------------------------------------------------------------------
除了可以一個方向上變化, 還可以 radial 輻射狀漸變.
background-image: -webkit-radial-gradient(center center , red, blue); 此時第一個參數就可寫 center center.
--------------------------------------------------------------------------------------------------
特別的, 當是 radial 漸變時, 可以用 0px 0px 和 30% 30%, 這兩個數值分別是輻射中心相對於 X 軸和 Y 軸的偏移量, 如下:
background-image: -webkit-radial-gradient(0px 0px, red, blue);
--------------------------------------------------------------------------------------------------
background-image: -webkit-radial-gradient(25% 25%, red, blue);
原鏈接：https://www.cnblogs.com/vlovecode/p/5959942.html