解释CSS3线性梯度

Question

我找到了一种在this site上做一个很棒的背景的方法，我想知道CSS是怎么回事。有很多正在发生的事情，我希望能够用其他东西来复制它。下面是我找到的一些描述基础知识的网站：http://css-tricks.com/examples/CSS3Gradient/、https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient、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

此技术使用两个组件：

a)定义了20px x 20px (最后一行)的背景大小后，您可以定义这些尺寸的正方形。这将作为一个框架，它将削减..

b)线性渐变，在给定的角度上，从一种颜色到透明。

在大多数情况下，这会创建一个三角形。(如果超出渐变维度中的角，则可以创建梯形)

​

请注意，您可以获得基本正方形的任何角来调整渐变角度

你有帖子的背景基本上包含6个三角形。

创建一个有趣的布局所剩下的就是定位你得到的不同三角形的能力。这是渐变颜色后的2个参数，位置分别为x和y坐标。

我在一些回答中使用了这种技术：here或相当复杂的here

玩耍和实验，这就是学习的方式。

我已经把你的例子修改成这样

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度(即指向2点钟方向，红色为17像素，然后立即变为透明)。cobnfusing部分在这里。0的位置会有这个三角形作为我发布的第一张图片。将位置设置为0px 20px，我们将其设置为向下。由于这是重复的渐变，它现在在蓝色方块中看起来很高(等效的，更容易理解的是position = 0px -60px。从顶部开始将其设置为20px，因此接触到边界

样式中的第二行创建绿色三角形。角度是207，所以方向与红色的方向相反。它的大小是20px，大约与红色相同，但它在y轴上的位置是40px。如果它没有定位，它将位于正方形的右上角(只是我发布的第一张图像，旋转了180度。将它向右移动40像素，使其看起来就像进入了邻里广场一样。

也许理解这一点的最好方法是在浏览器的开发工具中使用每一个值。