如何正确使用线性梯度？

Question

我是 CSS3 的新手，我的项目的 CSS 文件中有以下样式：

.headerDiv {
    background-image: linear-gradient(#04519b, #044687 60%, #033769);
    ............................
    ............................
    ............................
}

我很清楚是什么 linear-gradient(#04519b, #044687 60%, #033769); 应该这样做（它创建一个垂直渐变作为类名 headerDiv 的 div 的背景。

我必须把它改成渐变的颜色，所以我在谷歌上找到了这个文档：http://www.w3schools.com/css/css3_gradients.asp

问题是我找不到 CSS 文件中使用的语法。

与我的相关：

linear-gradient(#04519b, #044687 60%, #033769);

究竟代表什么：

1) 第一个值 (#04519b)

2）第二个值（#044687 60%），60%是什么意思？

3) 第三个值 (#033769)

我知道这些正在改变渐变颜色，但我不知道确切的顺序以及 60% 的含义。

Answer 1

渐变linear-gradient(#04519b, #044687 60%, #033769);可以解释如下：

• 渐变是从to bottom 的顶部div 开始的。这是default direction，如果未指定角度（如45deg）或未指定方向（如to right），则使用它。
• 第一个颜色（即0%）是#04519b。如果没有为第一种颜色指定 color-stop position，则根据规范假定为 0%。
• 60% 是color-stop position。即在渐变图像高度的60%处，颜色应该正好是#044687。
• 这意味着在 0% 到 60% 之间，颜色逐渐从 #04519b 变为 #044687。
• 最终颜色（即100%）是#033769。与第一种颜色类似，如果没有为最后一种颜色指定位置，则假定为 100%。
• 这意味着在 60% 和 100% 之间，颜色逐渐从 #044687 变为 #033769。

div{
  height: 100px;
  width: 100%;
  background: linear-gradient(#04519b, #044687 60%, #033769);
}

<div></div>

Answer 2

这是linear-gradient的语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

方向

left,right,toright,..
left top,bottom right,..
180deg,80deg,90deg..