解釋CSS3線性漸變

Question

我找到了一種在此站點上制作出色背景的方法，並且我想了解CSS的情況。 發生了很多事情，我希望能夠與其他東西復制它。 以下是一些我發現的網站，它們描述了基礎知識： http : //css-tricks.com/examples/CSS3Gradient/，https : //developer.mozilla.org/en-US/docs/Web/CSS/linear-漸變 ， http://www.w3schools.com/css/css3_gradients.asp

但他們都沒有描述這么復雜的東西。 有人可以帶我穿越線性漸變線嗎？ 為什么會有多個線性梯度？ 線性漸變括號之外的參數是什么意思？

CSS：

background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;

Answer 1

由於停止點，您會看到多個線性漸變。 如果您真的想詳細介紹本文，請在我遇到相同問題時向我解釋。

線性漸變和停止點

Answer 2

此技術使用2個組件：

a）已經定義了20px x 20px（最后一行）的背景尺寸，然后定義這些尺寸的正方形。 這將作為剪切的框架。

b）在給定角度的線性漸變，從彩色變為透明。

大多數情況下，這會創建一個三角形。 （如果超出漸變尺寸的角，則可以創建梯形）

請注意，您可以通過調整漸變角獲得基本正方形的任何角

您發布的背景基本上包含6個三角形。

創建有趣的布局所剩下的就是定位所獲得的不同三角形的能力。 這是漸變色之后的2個參數，位置以x和y坐標給出。

我在一些答案中使用了此技術： 在這里，或者是一個相當復雜的技術， 在這里

玩耍並嘗試，這就是學習的方式。

我已經將您的示例修改為此

div {
    background:
    linear-gradient(27deg, red 17px, transparent 17px) 0 20px,
    linear-gradient(207deg, green 20px, transparent 20px) 40px 0px,
    linear-gradient(90deg, pink 40px, transparent 40px),
    linear-gradient(white 25%, orange 25%, orange 50%, transparent 50%, transparent 75%, black 75%, black);
    background-size: 80px 80px;
}

藍色矩形是背景的基本大小。

第一行創建一個紅色三角形，其角度為27度（即將aprox指向2點鍾，是紅色的17個像素，然后立即變為透明。在這里有cobnfusing部分。0o位置將具有這個三角形是我發布的第一張圖片。將位置設置為0px 20px，我們將其向下設置。由於這是漸變，因此它現在在藍色正方形中顯得較高（相當於，更容易理解，它將是position = 0px- 60像素。您將其設置為距頂部20像素，因此觸摸邊框

樣式中的第二行創建綠色三角形。 角度為207，因此與紅色方向相反。 大小為20像素，與紅色大致相同，但位於y處為40像素。 如果未放置，它將位於正方形的右上角（只是我發布的第一張圖片，旋轉了180度。將其向右移動40 px，使其看起來好像進入了相鄰的正方形。

理解它的最好方法可能是與瀏覽器的開發工具中的每一個價值一起發揮作用。