NOTE- 编辑 CSS，使渐变跨越元素的宽度，而不仅仅是边框宽度。
这就是我想到的，这或多或少是 h3n 建议填写的更多特定于供应商的属性：
border-right: 5px solid #000; /* Don't forget to modify to the right border. */
background-image:
-webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image:
-webkit-linear-gradient(180deg, #000, transparent),
-webkit-linear-gradient(180deg, #000, transparent)
;
background-image:
-moz-linear-gradient(180deg, #000, transparent),
-moz-linear-gradient(180deg, #000, transparent)
;
background-image:
-o-linear-gradient(180deg, #000, transparent),
-o-linear-gradient(180deg, #000, transparent)
;
background-image:
linear-gradient(90deg, #000, transparent),
linear-gradient(90deg, #000, transparent)
;
-moz-background-size: 100% 5px; /* This get flipped. */
background-size: 100% 5px; /* This get flipped. */
background-position: 0 0, 0 100%; /* The last argument gets flipped. */
background-repeat: no-repeat;
http://jsfiddle.net/vqnk9/1548/ http://jsfiddle.net/vqnk9/1548/
MDN 有一个合理的教程 https://developer.mozilla.org/en-US/docs/CSS/linear-gradient以及如何处理这个跨浏览器。
现在，如果您仔细观察，您可能会注意到非供应商background-image uses 90deg代替180deg。我原来的想法是-90deg，所以当然这对我来说是有意义的（？），但至于为什么它们不同，这是W3 spec http://dev.w3.org/csswg/css3-images/#linear-gradients（请参阅最后引用以了解这种差异背后的原因）：
4.1.1.线性梯度()语法
线性梯度语法为：
<linear-gradient> = linear-gradient(
[ [ <angle> | to <side-or-corner> ] ,]?
<color-stop>[, <color-stop>]+
)
<side-or-corner> = [left | right] || [top | bottom]
该函数的第一个参数指定渐变线，它为渐变提供方向并确定色标的位置。可以省略；如果是这样，它默认为“到底部”。
渐变线的方向可以通过两种方式指定：
使用角度
就本论点而言，“0deg”指向上方，正角度表示顺时针旋转，因此“90deg”指向右侧。
使用关键字
如果参数为 'to top'、'to right'、'tobottom' 或 'to left'，则渐变线的角度分别为 '0deg'、'90deg'、'180deg' 或 '270deg' 。
如果参数指定了框的一个角，例如“到左上角”，则渐变线必须倾斜，使其指向与指定角相同的象限，并且垂直于与框的两个相邻角相交的线。渐变框。这会导致 50% 处的颜色停止点与两个相邻角相交（参见示例）。
从渐变框的中心开始，以指定角度向两个方向延伸一条线。终点是渐变线上的点，垂直于渐变线绘制的线将在指定方向与渐变框的角相交。起点的确定方式相同，但方向相反。
来自 MDN，一些行政琐事 https://developer.mozilla.org/en-US/docs/CSS/linear-gradient为什么程度不同（怪苹果？）：
前缀变体之间仍然存在最后的语义好奇心
和无前缀的提案。根据 Apple 最初的提议，
语法的前缀变体都使用 an<angle>定义为
极角，即0deg代表东方。要连贯
与 CSS 的其余部分一样，该规范定义了一个角度0deg代表北方。为了防止网站使用带前缀的版本
即使适应了其他情况，财产也会突然被破坏
向前兼容的最终语法，它们保持原始角度
定义(0deg = East)。他们会切换到正确的规格
取消属性的前缀。此外，由于它们并非不相容，Gecko
支持带 to 关键字和不带 to 关键字的语法。
同样，不带关键字的语法将在以下情况下被删除：
取消前缀。
