注意 – 编辑CSS以使横跨元素宽度的渐变跨度,而不仅仅是边框宽度.

这就是我所提出的,这或多或少是h3n建议填充的更多特定于供应商的属性：

border-right: 5px solid #000; /* Don't forget to modify to the right border. */

background-image:

-webkit-gradient(linear,to(transparent));

background-image:

-webkit-linear-gradient(180deg,#000,-webkit-linear-gradient(180deg,transparent)

;

background-image:

-moz-linear-gradient(180deg,-moz-linear-gradient(180deg,transparent)

;

background-image:

-o-linear-gradient(180deg,-o-linear-gradient(180deg,transparent)

;

background-image:

linear-gradient(90deg,linear-gradient(90deg,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;

MDN还有关于如何处理这种跨浏览器的reasonable tutorial.

现在,如果仔细观察,您可能会注意到非供应商背景图像使用90deg而不是180deg.我最初的想法是-90deg,所以当然这对我来说是有道理的(？),但至于为什么它们不同,这里是W3 spec(见这个差异背后推理的最后一个引用)：

4.1.1. linear-gradient() Syntax

The linear gradient Syntax is:

= linear-gradient(

[ [ | to ],]?

[,]+

)

= [left | right] || [top | bottom]

The first argument to the function specifies the gradient line,which gives the gradient a direction and determines how color-stops are positioned. It may be omitted; if so,it defaults to ‘to bottom’.

The gradient line’s direction may be specified in two ways:

using angles

For the purpose of this argument,‘0deg’ points upward,and positive angles represent clockwise rotation,so ‘90deg’ point toward the right.

using keywords

If the argument is ‘to top’,‘to right’,‘to bottom’,or ‘to left’,the angle of the gradient line is ‘0deg’,‘90deg’,‘180deg’,or ‘270deg’,respectively.

If the argument instead specifies a corner of the Box such as ‘to top left’,the gradient line must be angled such that it points into the same quadrant as the specified corner,and is perpendicular to a line intersecting the two neighboring corners of the gradient Box. This causes a color-stop at 50% to intersect the two neighboring corners (see example).

Starting from the center of the gradient Box,extend a line at the specified angle in both directions. The ending point is the point on the gradient line where a line drawn perpendicular to the gradient line would intersect the corner of the gradient Box in the specified direction. The starting point is determined identically,but in the opposite direction.

并从MDN,some administrivia了解为什么学位不同(归咎于Apple？)：

A last semantic curiosity still exists between the prefixed variants

and the unprefixed proposal. Following the initial Apple proposal,the

prefixed variants of the Syntax all uses the an defined like

polar angles,that is with 0deg representing the East. To be coherent

with the rest of CSS,the specification defines an angle with 0deg

representing the North. To prevent sites using prefixed version of the

property to get suddenly broken,even when adapting to the otherwise

forward-compatible final Syntax,they keep the original angle

definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also,as they aren’t incompatible,Gecko supports,prefixed,both the Syntax with the to keyword and without. Here again,the Syntax without the keyword will be dropped when unprefixing.