css - 单独使用 CSS，你怎么能有一个从右到左的 Border-bottom 渐变？

Question

我想知道是否可以单独使用 CSS 来实现从右到左而不是从中心向外渐变的 border-bottom。

在我寻找答案的过程中，我找到了一个 JSFiddle链接显示可以有一个从上到下的透明边框渐变；

方法一 /* 只使用背景渐变 */

.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;
}

方法二 /* 使用伪元素和背景渐变 */

.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;
}

我不明白上面的 CSS 如何让页面知道方向，我认为它只是一个小的、简单的、低调的编辑，我现在似乎无法及时找到它，因此我是提出这个问题是为了寻求帮助。

我还想知道如果边框是虚线或点线，这是否可行？

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

最好的问候，蒂姆

Answer 1

注意 - 编辑 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/

MDN 有一个 reasonable tutorial以及如何处理这种跨浏览器。

现在，如果仔细观察，您可能会注意到非供应商 background-image使用 90deg而不是 180deg .我最初的想法是-90deg ，所以这对我来说当然有意义(？)，但至于为什么它们不同，这里是 W3 spec (有关此差异背后的原因，请参阅最后引述):

4.1.1. linear-gradient() syntax

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.

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为什么度数不同(怪苹果？):

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.