定義與方法

inear-gradient() 函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。創(chuàng)建一個(gè)線性漸變，需要指定兩種顏色，還可以實(shí)現(xiàn)不同方向（指定為一個(gè)角度）的漸變效果，如果不指定方向，默認(rèn)從上到下漸變。

參數(shù)

方法：linear-gradient(direction, color-stop1, color-stop2, ...)

direction：第一個(gè)參數(shù)表示漸變的方向。其可以是一個(gè)具體的角度值如45deg，或者是具體的方向值如to top，表示自下而上漸變；to bottom表示自上而下漸變【默認(rèn)為to bottom】，還有 to right、to left等。

color-stop：漸變色的起止位置，通常是顏色加起始位置百分比。如 red 10%等。

角度參考值：【角度值僅代表寬高相等的正方形所對(duì)應(yīng)的角度值】

線性漸變的組成

線性漸變由一個(gè)軸、漸變線和兩個(gè)或多個(gè)色停點(diǎn)定義。軸上的每個(gè)點(diǎn)都是不同的顏色，為了創(chuàng)建平滑的漸變，linear-gradient()函數(shù)繪制了一系列垂直于漸變線的彩色線，每一條線的顏色都和它與漸變線相交的點(diǎn)的顏色相匹配。

漸變線由包含漸變圖像的方框的中心和一個(gè)角度定義。漸變的顏色由兩個(gè)或多個(gè)點(diǎn)決定:起點(diǎn)、終點(diǎn)和中間的可選色停點(diǎn)。

角度值

角度值：穿過中心點(diǎn)的垂直線與漸變線之間的夾角，如圖中所示的E為30度角。根據(jù)角度可以確定漸變線的位置，如圖中F’所在的直線為漸變線。

起止點(diǎn)：起點(diǎn)是漸變線上第一個(gè)顏色開始的位置。終點(diǎn)是最后一種顏色的終點(diǎn)。這兩個(gè)點(diǎn)的每一個(gè)點(diǎn)都是由梯度線與在同一象限內(nèi)從方框角出發(fā)的垂線的交點(diǎn)定義的。終點(diǎn)可以理解為起點(diǎn)的對(duì)稱點(diǎn)。
如上圖中從C點(diǎn)和A點(diǎn)向漸變線畫出垂線，交點(diǎn)即為起止點(diǎn)。

上圖中G為起點(diǎn)，H為終點(diǎn)。color stop為介于起點(diǎn)和終點(diǎn)之間，漸變線上的某些點(diǎn)。以linear-gradient(30deg, red 10% , yellow 30%, blue 70%)為例，在漸變線上就有3個(gè)點(diǎn)，從起點(diǎn)開始10%，30%，70%的位置。

漸變中心點(diǎn)：默認(rèn)漸變中心點(diǎn)為兩個(gè)色值點(diǎn)的中間值，可通過參數(shù)移動(dòng)中間點(diǎn)。以上面linear-gradient(30deg, red 10% , yellow 30%, blue 70%)為例，在紅色向黃色漸變時(shí)，默認(rèn)的漸變中心點(diǎn)在兩者正中的位置，也就是20%的位置。linear-gradient(30deg, red 10% , 15%, yellow 30%, blue 70%)，通過在兩者之間設(shè)定值，可以將中心點(diǎn)移動(dòng)到15%的位置。

用法示例

通過在漸變線上添加更多的顏色停止點(diǎn)，您可以在多個(gè)顏色之間創(chuàng)建高度自定義的過渡?？梢允褂没蝻@式地定義顏色停止的位置。如果您沒有指定顏色的位置，它將被放置在它前面和后面顏色的中間。下面兩個(gè)梯度是相等的

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

默認(rèn)情況下，如果沒有帶有0%停止的顏色，則聲明的第一個(gè)顏色將在該點(diǎn)。同樣，最后一種顏色將繼續(xù)到100%標(biāo)記，或者如果在最后一站沒有聲明長(zhǎng)度，則在100%標(biāo)記處。

允許多位置彩色停機(jī)，通過在CSS聲明中包含兩個(gè)位置，可以將一個(gè)顏色聲明為兩個(gè)相鄰的顏色停止點(diǎn)。下面三個(gè)梯度是相等的

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

創(chuàng)建不帶漸變的純色帶

background: linear-gradient(red 0% 30%, yellow 30% 60%, blue 30% 100%);

繪制三角圖形

在該例子中，通過將其中一種色彩設(shè)置為透明色transparent，可獲得上三角或者下三角

.box {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg, yellow 50%, red 50%);
    /* 等價(jià)于background-image: linear-gradient(45deg, yellow 0 50%, red 50% 100%);  */
    background-size: 100% 100%;
}

創(chuàng)建方塊背景圖

由四個(gè)三角形組成兩個(gè)小方塊。

.box {
    height: 90px;
    background-image: linear-gradient(45deg, red 25%,transparent 0),
    linear-gradient(45deg, transparent 75%, red 0),
    linear-gradient(45deg, red 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, red 0);
    background-size: 30px 30px;
    border: 1px solid pink;
    background-position: 0 0,-15px 15px,15px -15px,0 0;
}

網(wǎng)格線

height: 300px;
    background-image: linear-gradient(to right,pink 1px, transparent 1px), linear-gradient(pink 1px, transparent 1px);
    background-size: 30px 30px;

注意事項(xiàng)

帶前綴的漸變?cè)O(shè)置角度的差異性

linear-gradient(0deg, red ,blue)不太前綴的漸變默認(rèn)是從上往下漸變。加上前綴以后，是從做左往右。

background-image:-webkit-linear-gradient(0deg,skyblue,orange);
	background-image:-moz-linear-gradient(0deg,skyblue,orange);
	background-image:-o-linear-gradient(0deg,skyblue,orange);
	background-image:-ms-linear-gradient(0deg,skyblue,orange);

為了保持兩者一致，可采用互補(bǔ)的寫法，帶前綴的和不帶前綴的角度值相加為90deg。

background-image:-webkit-linear-gradient(90deg,skyblue,orange);
//等價(jià)
linear-gradient(0deg, red ,blue)

漸變方向關(guān)鍵詞

-webkit-linear-gradient(right,skyblue,orange) 等價(jià)于 gradient(to left,skyblue,orange)，是一個(gè)從右往左的漸變。

到此這篇關(guān)于CSS中的linear-gradient參數(shù)學(xué)習(xí)與使用的文章就介紹到這了,更多相關(guān)css linear-gradient參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論