摘要:兼容性見參考二線性漸變漸變線通過函數(shù)可以創(chuàng)建線性漸變圖片。線性漸變是通過一個(gè)軸定義的,這個(gè)軸稱為漸變線。等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)并且和直接距離為,不會(huì)漸變,如下圖參考線性漸變
一、漸變(gradient) 1.1 關(guān)于漸變
漸變表示從一種顏色平滑的過度到另一種顏色。它是圖片
漸變的尺寸又叫做漸變盒子,它表示漸變繪制的區(qū)域和位置。根據(jù)漸變應(yīng)用的場(chǎng)景漸變盒子的大小和位置的決定因素不同。如背景圖片時(shí)受background-size, background-position影響。
1.3 兼容性見參考3
二、線性漸變(linear-gradient) 2.1 漸變線(gradient line)通過linear-gradient函數(shù)可以創(chuàng)建線性漸變圖片。線性漸變是通過一個(gè)軸定義的,這個(gè)軸稱為漸變線。以漸變盒子的中心為原點(diǎn)繪制坐標(biāo)系統(tǒng)(上為Y軸正方向,右為X軸正方向),這樣漸變盒子的4個(gè)角分別在該坐標(biāo)系統(tǒng)的4個(gè)象限中。穿過坐標(biāo)系統(tǒng)原點(diǎn)的任意角度(順時(shí)針為正方向)直線和該直線經(jīng)過的象限的兩個(gè)漸變盒子角的垂直交點(diǎn)就構(gòu)成了漸變線的起點(diǎn)和終點(diǎn),其中正方向?yàn)榻K點(diǎn)。如:
默認(rèn)0deg:
順時(shí)針45deg:
注意:漸變線的起點(diǎn)和終點(diǎn)不一定在漸變盒子區(qū)域內(nèi)。
2.2 漸變區(qū)域的顏色漸變線起點(diǎn)和終點(diǎn)直接的任意點(diǎn)的垂直線的顏色是一樣的,并且該垂直線和漸變盒子的重疊區(qū)域就是漸變區(qū)域的顏色。
綜上所述確定一個(gè)線性漸變的實(shí)際結(jié)果要經(jīng)過這幾個(gè)步驟:
確定漸變盒子的大小和位置;
確定漸變線的起點(diǎn)和終點(diǎn);
確定漸變線的起點(diǎn)和終點(diǎn)內(nèi)所有點(diǎn)的垂直線的顏色以及垂直線和漸變盒子的重疊區(qū)域。
2.3 語法linear-gradient() = linear-gradient([| to ]? , , [, ...]) = [left | right] || [top | bottom] = ?
參數(shù)1用于確定漸變線的起始點(diǎn),該參數(shù)可選的,默認(rèn)是180deg(to bottom);
除了使用
四邊:top, right, bottom, left。依次對(duì)應(yīng)角度值為:0deg, 90deg, 180deg, 270deg。
四角:top right, top left, bottom right, bottom left。注意四角分別表示漸變盒子矩形框的四個(gè)角,并且右上角不一定是45deg。
參數(shù)2...N是定義漸變線的顏色點(diǎn), 用于確定漸變線的起點(diǎn)和終點(diǎn)內(nèi)所有點(diǎn)的垂直線的顏色。
顏色點(diǎn)列表最少有兩個(gè)顏色點(diǎn)參數(shù)。
linear-gradient(yellow, blue); linear-gradient(180deg, yellow, blue); linear-gradient(to bottom, yellow, blue);2.4 顏色點(diǎn) (color-stops)
顏色點(diǎn)包含兩個(gè)信息:點(diǎn)的顏色和點(diǎn)的位置(在漸變線上的位置,一維的)。相鄰的兩個(gè)顏色點(diǎn)直接就發(fā)生漸變過度效果。
關(guān)于顏色點(diǎn)的位置位置參數(shù)可以省略:
如是是第一個(gè)顏色點(diǎn)位置省略,則取值為0%;
如果是最后一個(gè)位置省略則取值100%;
其他則取值相鄰兩個(gè)位置的中間點(diǎn)位置。
如果顏色點(diǎn)的位置比其左邊的顏色點(diǎn)的位置小,則取值為其左邊的顏色點(diǎn)的位置。即右側(cè)的顏色的位置大于等于左側(cè)的顏色點(diǎn)位置。
除了是%外可以使用px單位,都是相對(duì)應(yīng)漸變線的長(zhǎng)度計(jì)算的,同一個(gè)漸變中盡量使用相同的單位。
位置參數(shù)可以超出漸變線的長(zhǎng)度范圍,比如取值為負(fù)值或者大于100%的值。
相鄰的兩個(gè)位置直接有距離時(shí)才會(huì)參數(shù)漸變效果,如果距離為0則會(huì)顏色突變。
linear-gradient(red, white 20%, blue)// 等價(jià) linear-gradient(red 0%, white 20%, blue 100%) linear-gradient(red 40%, white, black, blue)// 等價(jià) linear-gradient(red 40%, white 60%, black 80%, blue 100%) linear-gradient(red -50%, white, blue)// 等價(jià) linear-gradient(red -50%, white 25%, blue 100%) linear-gradient(red -50px, white, blue)// 等價(jià) linear-gradient(red -50px, white calc(-25px + 50%), blue 100%) linear-gradient(red 20px, white 0px, blue 40px)// 等價(jià) linear-gradient(red 20px, white 20px, blue 40px) linear-gradient(red, white -50%, black 150%, blue)// 等價(jià)linear-gradient(red 0%, white 0%, black 150%, blue 150%) linear-gradient(red 80px, white 0px, black, blue 100px)// 等價(jià) linear-gradient(red 80px, white 80px, black 90px, blue 100px) linear-gradient(0deg, red 60%, yellow 50%, #000 100%); // 等價(jià)linear-gradient(0deg, red 0%, red 60%, yellow 60%, #000 100%); 并且red和yellow直接距離為0,不會(huì)漸變,如下圖參考:
W3C Draft
css-tricks
CSS3 線性漸變(linear-gradient)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/115996.html
摘要:分為線性漸變和徑向漸變。而我們今天主要是通過一個(gè)小例子來針對(duì)線性漸變來剖析其具體的用法。今天的例子就是用的線性漸變制作一個(gè)大致的針孔注射器。第一個(gè)參數(shù)表示線性漸變的方向,是從上到下是從左到右,如果定義成,那就是從左上角到右下角。 CSS3 Gradient 分為 linear-gradient(線性漸變)和 radial-gradient(徑向漸變)。而我們今天主要是通過一個(gè)小例子來針...
摘要:基本用法想要知道線性漸變有什么用,當(dāng)然要先學(xué)習(xí)它的屬性和用法。下面我們先一起學(xué)習(xí)一下線性漸變的屬性。函數(shù)的第一個(gè)參數(shù)是角度或者方向,第二個(gè)參數(shù)是截止顏色的值,要想產(chǎn)生漸變的效果,當(dāng)然至少要兩個(gè)或者兩個(gè)以上的顏色值。 css3的漸變屬性已經(jīng)在各種網(wǎng)頁設(shè)計(jì)中被廣泛使用,在沒有css3的漸變屬性之前,要實(shí)現(xiàn)一些多種顏色切換的效果圖,你可能別無他法,只能用一個(gè)圖片來顯示,雖然你知道使用圖片需要...
摘要:屬性值則依賴于我們需要?jiǎng)?chuàng)建什么樣的漸變背景,例如線性漸變或放射性漸變。我們會(huì)在線性漸變中介紹不同種類的供應(yīng)商前綴,但為了簡(jiǎn)便起見,放射性漸變中我們不會(huì)再提及。線性漸變多年來,設(shè)計(jì)師和開發(fā)者們都是通過切圖來實(shí)現(xiàn)漸變背景。 背景對(duì)網(wǎng)站的設(shè)計(jì)有重大的影響。它有利于建立網(wǎng)站的整體感覺,設(shè)置分組,分配優(yōu)先級(jí),對(duì)網(wǎng)站的可用性也有相當(dāng)大的影響。 在CSS中,元素的背景可以是一個(gè)純色,一張圖,一個(gè)漸變...
摘要:屬性值則依賴于我們需要?jiǎng)?chuàng)建什么樣的漸變背景,例如線性漸變或放射性漸變。我們會(huì)在線性漸變中介紹不同種類的供應(yīng)商前綴,但為了簡(jiǎn)便起見,放射性漸變中我們不會(huì)再提及。線性漸變多年來,設(shè)計(jì)師和開發(fā)者們都是通過切圖來實(shí)現(xiàn)漸變背景。 背景對(duì)網(wǎng)站的設(shè)計(jì)有重大的影響。它有利于建立網(wǎng)站的整體感覺,設(shè)置分組,分配優(yōu)先級(jí),對(duì)網(wǎng)站的可用性也有相當(dāng)大的影響。 在CSS中,元素的背景可以是一個(gè)純色,一張圖,一個(gè)漸變...
閱讀 882·2021-09-02 09:55
閱讀 1521·2019-12-27 12:02
閱讀 1730·2019-08-30 14:24
閱讀 1151·2019-08-30 14:18
閱讀 2764·2019-08-29 13:57
閱讀 2210·2019-08-26 11:51
閱讀 1376·2019-08-26 10:37
閱讀 775·2019-08-23 16:09