解释CSS3线性渐变

时间:2014-02-04 19:12:17

标签: css3 linear-gradients

我找到了一种方法可以在this site上创建一个很棒的背景,我想了解CSS的用途。有很多事情发生,我希望能够与其他东西复制它。以下是我发现的一些描述基础知识的网站: http://css-tricks.com/examples/CSS3Gradient/https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradienthttp://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;

2 个答案:

答案 0 :(得分:0)

由于停止点,您会看到多个线性渐变。如果您真的想了解详细信息,那么当我遇到同样的问题时,这篇文章会向我解释。享受

Linear Gradients and stop points

答案 1 :(得分:0)

此技术使用2个组件:

a)将背景大小定义为20px×20px(最后一行)后,您可以定义这些维度的正方形。这将作为一个框架,将削减..

b)线性渐变,在给定角度,从颜色变为透明。

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

请注意,您可以调整基本方块的任何角来调整渐变角度

您发布的背景基本上包含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;
}

background2

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

第一行创建红色三角形,角度为27度(指向大约2点钟,红色17像素,然后立即变为透明.cobnfusing部分在这里.0 o位置将此三角形作为我发布的第一个图像。将位置设置为0px 20px,我们将其设置为向下。由于这是正在渐变的渐变,现在它在蓝色方块中看起来很高(等效,更容易理解,将是位置= 0px -60px。你从顶部设置为20像素,所以触摸边框

样式中的第二行创建绿色三角形。角度为207,因此沿红色方向相反。尺寸为20px,与红色大致相同,但在y处定位为40px。如果它没有定位,它将位于广场的右上角(只是我发布的第一张图像,旋转180度。向右移动40像素,使它看起来好像已进入邻近的广场

也许是了解它的最佳方式,它可以与浏览器的开发工具中的每个值一起使用。