仅使用CSS，如何实现从右到左的边界-底部渐变?

I would like to know if it is possible using CSS alone to be able to do a border-bottom with gradient going from right to left and not from the center outwards.

我想知道是否可以只使用CSS实现从右到左的渐变而不是从中心向外的渐变。

In my search for the answer, I have found a JSFiddle link which shows that it is possible to have a border gradient going from top to bottom which is transparent;

在我寻找答案的过程中，我找到了一个JSFiddle链接，它显示了一个从上到下的边界梯度是可能的，它是透明的;

Method One /* Using only background gradients */

方法1 /*只使用背景梯度*/

.one { 
    width: 400px;
    padding: 20px 25px;
    border-top: 5px solid #000;
    margin: 40px auto;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image:
        -moz-linear-gradient(#000, transparent),
        -moz-linear-gradient(#000, transparent)
    ;
    background-image:
        -o-linear-gradient(#000, transparent),
        -o-linear-gradient(#000, transparent)
    ;
    background-image: 
        linear-gradient(#000, transparent),
        linear-gradient(#000, transparent)
    ;
    -moz-background-size:5px 100%;
    background-size:5px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

Method 2 /* Using pseudo-elements and background gradients */

方法2 /*使用伪元素和背景梯度*/。

.two {
    position: relative;
    width: 400px;
    padding: 20px;
    border: 5px solid transparent;
    border-top-color: #000;
    margin: 40px auto;
}

.two:before,
.two:after {
    content: "";
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    width: 5px;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image: -moz-linear-gradient(#000, transparent);
    background-image: -o-linear-gradient(#000, transparent);
    background-image: linear-gradient(#000, transparent);
}

.two:after {
    left: auto;
    right: -5px;
}

I do not understand how the above CSS is letting the page know the direction and I assume it is just a little, simple, under-looked edit, of which I cannot seem to find at this moment in time and therefore I am making this question to ask for some help.

我不理解上面的CSS是如何让页面知道方向的，我认为它只是一个小的，简单的，未被重视的编辑，我似乎无法及时找到，因此我提出这个问题来寻求帮助。

I would also like to know if this will work if the border is dashed or dotted?

我还想知道如果边界虚线或虚线，这是否可行?

Thank you for any help and/or advice in advanced.

感谢您提供的任何帮助和/或建议。

Best Regards, Tim

最好的祝福,蒂姆

2 个解决方案

#1

NOTE - Edited the CSS to have the gradient span across the width of the element, not just the border width.

注意-编辑CSS，使其具有跨元素宽度的梯度跨度，而不仅仅是边框宽度。

This is what I've come up with, which is more or less what h3n is suggesting with more vendor-specific properties filled-in:

这就是我想到的，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 has a reasonable tutorial on how to handle this cross-browser, as well.

MDN还有一个关于如何处理这个跨浏览器的合理教程。

Now, if you look closely, you may notice that the non-vendor background-image uses 90deg instead of 180deg. My original thought was -90deg, so of course that makes sense to me somehow (?), but as to why they are different, here is the W3 spec (see the last quote for the reasoning behind this difference):

现在，如果您仔细观察，您可能会注意到非供应商背景图像使用90deg而不是180deg。我最初的想法是-90deg，当然这对我来说是有意义的(?)，但是至于为什么它们不同，这里是W3规范

4.1.1. linear-gradient() syntax

以下4.4.1。线性梯度()语法

The linear gradient syntax is:

线性梯度语法为:

<linear-gradient> = linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]? 
    <color-stop>[, <color-stop>]+
)

<side-or-corner> = [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.

对于这个论点，' 0deg '点向上，正角代表顺时针旋转，所以' 90deg '点向右。

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.

如果参数是' to top '， ' to right '， ' to bottom '，或' to left '，那么梯度线的角度分别是' 0deg '， ' 90deg '， ' 180deg '或' 270deg '。

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).

如果参数指定了框的一个角，比如“左上角”，那么梯度线必须有角度，使它指向与指定角相同的象限，并且垂直于与梯度框的两个相邻角相交的线。这就导致了50%的颜色停止与相邻的两个角相交(见示例)。

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.

从渐变盒的中心开始，在两个方向的指定角度延伸一条线。结束点是梯度线上的点，与梯度线垂直的线将在指定方向上与梯度盒的角相交。起点是相同的，但方向相反。

And from MDN, some administrivia on why the degrees differ (blame Apple?):

来自MDN的一些管理人员解释了为什么学位会有差异(责怪苹果?)

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 <angle> 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.

最后一个语义的好奇仍然存在于固定的变体和不确定的提议之间。按照苹果最初的提议，语法的前缀变体都使用了定义为极地角的 ，即0deg表示东方。为了与CSS的其余部分保持一致，规范定义了一个用0deg表示北方的角度。为了防止使用属性的前缀版本的站点突然被破坏，即使是在适应前向兼容的最终语法时，它们仍然保留原始的角度定义(0deg = East)。在解除属性前缀时，它们将切换到正确的规范。此外，由于它们不兼容，Gecko支持、前缀都为to关键字和不为to的语法。在这里，没有关键字的语法也会在非前缀时被删除。

#2

at least for webkit this sets the angle so its from right to left: -webkit-linear-gradient(180deg, black, white)

至少对于webkit来说，它设置了从右到左的角度:-webkit-线性-梯度(180deg，黑色，白色)