今天一大早来逛逛黑客派，结果站点居然崩溃了，不过错误页面的效果还挺好看的，仔细看了看代码，居然找到一个小 bug….那就只好写篇博文吐槽一下咯…ps：要不要把服务器nginx的错误日志拿出来给我们爽爽？

bug

错误页面的样式代码部分有如下代码：

.body--ready {
  background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}

代码很简单，对背景的渐变做一个设置，咋一看也没啥问题，但是问题就出在：

background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);

linear-gradient，W3C标准线性渐变语法，第一个参数值应该改为 “to top”，这里看是要求从top开始进行渐变，渐变到bottom，所以应该改为：

background: linear-gradient(to bottom, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);

渐变原理

作为一名乐(ai)于(guan)助(xian)人(shi)的程序猿，我觉得有必要帮助大家分析一下，这个

-webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);

里面的参数是表示什么意思。

第一个参数：

top ，表示从顶部开始往下进行渐变
left，表示从左边开始往右进行渐变
right
bottom

要注意，如果用的是linear-gradient，那么参数将变成：

to top ，表示从底部开始往上进行渐变
to left
to right
to bottom

第二个参数和第三个参数 rgb(203,235,219) 0%，rgb(55, 148, 192) 120%

现在我们假设整个div是一个长度为100px的区域，假定从最左边开始渐变，那么上面的两个参数就表示，以rgb(203,235,219)这个颜色，在最左边开始渲染，然后以rgb(55, 148, 192)这个颜色，在离最左边120px的位置开始渲染，当然我们的div只有100px，超出的部分我们是看不见的，那中间的区域呢？就是从第一个颜色到第二个颜色的渐变啦，同理我们也可这么写：

background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, white 10% , black 20% , green 80% , rgb(55, 148, 192) 120%);

上面的代码就表示，从顶部开始，从起始位置以rgb(203, 235, 219)这个颜色，朝着离起始位置10%距离的白色进行渐变，然后再从白色，朝着离起始位置20%距离的黑色进行渐变，再从黑色开始，朝着离起始位置80%的绿色进行渐变，最后再朝着离起始位置120%距离的rgb(55, 148, 192)进行渐变，超出的部分不会被显示出来。