如何正确使用线性渐变？

Question

我在CSS3中很新,我的项目的CSS文件中有以下样式:

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

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

我必须更改渐变的颜色,所以我在Google上找到了这个文档: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.如果未指定角度(如)或无方向(如),则使用此默认方向.45degto right
• 第一种颜色(即at 0%)是#04519b.如果没有为第一种颜色指定颜色停止位置,则根据规格假定为0%.
• 这60%是一个颜色停止位置.这是60%梯度图像的高度,颜色应该是#044687.
• 这意味着在0%和60%之间,颜色逐渐从#04519b变为#044687.
• 最终的颜色(即at 100%)是#033769.与第一种颜色类似,如果没有为最后一种颜色指定位置,则假定为100%.
• 这意味着在60%和100%之间,颜色逐渐从#044687变为#033769.

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

<div></div>