CSS3-線性漸變

piglei 發布于2019-08-30 14:24 / 1683人閱讀

摘要：兼容性見參考二線性漸變漸變線通過函數可以創建線性漸變圖片。線性漸變是通過一個軸定義的，這個軸稱為漸變線。等價等價等價等價等價等價等價等價并且和直接距離為，不會漸變，如下圖參考線性漸變

一、漸變（gradient） 1.1 關于漸變

漸變表示從一種顏色平滑的過度到另一種顏色。它是圖片類型的一種，但是漸變類型圖片沒有尺寸，也沒有長寬比。它的尺寸取決于被應用的場景，比如作為元素的背景圖片時，其大小取決于元素的background-size，當用作list-style-image屬性值時取決于元素的size TODO ???。

1.2 漸變盒子（gradient box）

漸變的尺寸又叫做漸變盒子，它表示漸變繪制的區域和位置。根據漸變應用的場景漸變盒子的大小和位置的決定因素不同。如背景圖片時受background-size, background-position影響。

1.3 兼容性

見參考3

二、線性漸變（linear-gradient） 2.1 漸變線（gradient line）

通過linear-gradient函數可以創建線性漸變圖片。線性漸變是通過一個軸定義的，這個軸稱為漸變線。以漸變盒子的中心為原點繪制坐標系統（上為Y軸正方向，右為X軸正方向），這樣漸變盒子的4個角分別在該坐標系統的4個象限中。穿過坐標系統原點的任意角度（順時針為正方向）直線和該直線經過的象限的兩個漸變盒子角的垂直交點就構成了漸變線的起點和終點，其中正方向為終點。如：
默認0deg:

順時針45deg：

注意：漸變線的起點和終點不一定在漸變盒子區域內。

2.2 漸變區域的顏色

漸變線起點和終點直接的任意點的垂直線的顏色是一樣的，并且該垂直線和漸變盒子的重疊區域就是漸變區域的顏色。
綜上所述確定一個線性漸變的實際結果要經過這幾個步驟：

確定漸變盒子的大小和位置；

確定漸變線的起點和終點；

確定漸變線的起點和終點內所有點的垂直線的顏色以及垂直線和漸變盒子的重疊區域。

2.3 語法

linear-gradient() = linear-gradient([  | to  ]? ,, [,...])
 = [left | right] || [top | bottom]
 =  ?

參數1用于確定漸變線的起始點，該參數可選的，默認是180deg(to bottom)；
除了使用類型數據外還可以使用關鍵字(記得帶to關鍵字)：
四邊：top, right, bottom, left。依次對應角度值為：0deg, 90deg, 180deg, 270deg。
四角：top right, top left, bottom right, bottom left。注意四角分別表示漸變盒子矩形框的四個角，并且右上角不一定是45deg。

參數2...N是定義漸變線的顏色點, 用于確定漸變線的起點和終點內所有點的垂直線的顏色。
顏色點列表最少有兩個顏色點參數。

linear-gradient(yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to bottom, yellow, blue);

2.4 顏色點（color-stops）

顏色點包含兩個信息：點的顏色和點的位置（在漸變線上的位置，一維的）。相鄰的兩個顏色點直接就發生漸變過度效果。

關于顏色點的位置

位置參數可以省略：
如是是第一個顏色點位置省略，則取值為0%;
如果是最后一個位置省略則取值100%;
其他則取值相鄰兩個位置的中間點位置。

如果顏色點的位置比其左邊的顏色點的位置小，則取值為其左邊的顏色點的位置。即右側的顏色的位置大于等于左側的顏色點位置。

除了是%外可以使用px單位，都是相對應漸變線的長度計算的，同一個漸變中盡量使用相同的單位。

位置參數可以超出漸變線的長度范圍，比如取值為負值或者大于100%的值。

相鄰的兩個位置直接有距離時才會參數漸變效果，如果距離為0則會顏色突變。

linear-gradient(red, white 20%, blue)// 等價 linear-gradient(red 0%, white 20%, blue 100%)

linear-gradient(red 40%, white, black, blue)// 等價 linear-gradient(red 40%, white 60%, black 80%, blue 100%)

linear-gradient(red -50%, white, blue)// 等價 linear-gradient(red -50%, white 25%, blue 100%)

linear-gradient(red -50px, white, blue)// 等價 linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)

linear-gradient(red 20px, white 0px, blue 40px)// 等價 linear-gradient(red 20px, white 20px, blue 40px)

linear-gradient(red, white -50%, black 150%, blue)// 等價linear-gradient(red 0%, white 0%, black 150%, blue 150%)

linear-gradient(red 80px, white 0px, black, blue 100px)// 等價 linear-gradient(red 80px, white 80px, black 90px, blue 100px)

linear-gradient(0deg,  red 60%, yellow 50%, #000 100%); // 等價linear-gradient(0deg,  red 0%, red 60%, yellow 60%, #000 100%); 并且red和yellow直接距離為0，不會漸變，如下圖

參考：

W3C Draft

css-tricks

CSS3 線性漸變（linear-gradient）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115996.html

CSS3 線性漸變應用

摘要：分為線性漸變和徑向漸變。而我們今天主要是通過一個小例子來針對線性漸變來剖析其具體的用法。今天的例子就是用的線性漸變制作一個大致的針孔注射器。第一個參數表示線性漸變的方向，是從上到下是從左到右，如果定義成，那就是從左上角到右下角。 CSS3 Gradient 分為 linear-gradient（線性漸變）和 radial-gradient（徑向漸變）。而我們今天主要是通過一個小例子來針...

Snailclimb 2019-08-30 13:05 評論0 收藏0
淺探css3漸變

摘要：基本用法想要知道線性漸變有什么用，當然要先學習它的屬性和用法。下面我們先一起學習一下線性漸變的屬性。函數的第一個參數是角度或者方向，第二個參數是截止顏色的值，要想產生漸變的效果，當然至少要兩個或者兩個以上的顏色值。 css3的漸變屬性已經在各種網頁設計中被廣泛使用，在沒有css3的漸變屬性之前，要實現一些多種顏色切換的效果圖，你可能別無他法，只能用一個圖片來顯示，雖然你知道使用圖片需要...

lieeps 2019-08-29 17:17 評論0 收藏0
css3 漸變

摘要：漸變漸變分為兩種漸變，一種是線性漸變，一種是徑向漸變線性漸變線性漸變為向上，向下，向左，向右兩種漸變方式。線性漸變由一個軸即梯度線構成。 css3ps: css越來越真正的像一門語言了，css已經有變量了，剛剛看到文檔中。一個實驗性質的功能。漸變漸變分為兩種漸變，一種是線性漸變，一種是徑向漸變線性漸變線性漸變為向上，向下，向左，向右兩種漸變方式。 linear-gradient...

FrozenMap 2019-08-29 16:20 評論0 收藏0
[譯]HTML&CSS Lesson7: 設置背景和漸變色

摘要：屬性值則依賴于我們需要創建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設計師和開發者們都是通過切圖來實現漸變背景。背景對網站的設計有重大的影響。它有利于建立網站的整體感覺，設置分組，分配優先級，對網站的可用性也有相當大的影響。在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...

bang590 2019-08-29 16:54 評論0 收藏0
[譯]HTML&CSS Lesson7: 設置背景和漸變色

摘要：屬性值則依賴于我們需要創建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設計師和開發者們都是通過切圖來實現漸變背景。背景對網站的設計有重大的影響。它有利于建立網站的整體感覺，設置分組，分配優先級，對網站的可用性也有相當大的影響。在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...

jk_v1 2019-08-02 11:40 評論0 收藏0