浅析 b3log 错误页面中的背景线性渐变

今天一大早来逛逛黑客派，结果站点居然崩溃了，不过错误页面的效果还挺好看的，仔细看了看代码，居然找到一个小 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)进行渐变，超出的部分不会被显示出来。