单独使用CSS,你怎么能有一个从右到左的边框底部渐变？

Question

我想知道是否可以单独使用CSS来实现从右到左而不是从中心向外的渐变的边框底部.

在我寻找答案的过程中,我找到了一个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;
}

方法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;
}

我不明白上面的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也有一个关于如何处理这种跨浏览器的合理教程.

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

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'指向右侧.

使用关键字

如果参数是"顶部","右侧","底部"或"左侧",则梯度线的角度分别为"0deg","90deg","180deg"或"270deg" .

如果参数指定了方框的一个角,例如"向左上方",则渐变线必须成角度,使其指向与指定角相同的象限,并且垂直于与两个相邻角相交的线.渐变盒.这导致50%的颜色停止与两个相邻的角相交(参见示例).

从渐变框的中心开始,沿两个方向以指定角度延伸线.结束点是渐变线上的点,其中垂直于渐变线绘制的线将与指定方向上的渐变框的角相交.起点确定相同,但方向相反.

从MDN,一些管理员关于为什么学位不同(责怪Apple？):

在前缀变体和未加前缀的提议之间仍然存在最后的语义好奇心.在最初的Apple提议之后,语法的前缀变体都使用了<angle>定义的类似极角,即0deg代表东方.为了与CSS的其余部分保持一致,规范定义了一个0deg 表示北方的角度.为了防止使用属性的前缀版本的网站突然中断,即使在适应其他前向兼容的最终语法时,它们仍保留原始角度定义(0deg = East).在取消固定属性时,它们将切换到正确的规范.此外,由于它们不兼容,Gecko支持前缀,带有to关键字和无关的语法.同样,在无法修复时,将删除不带关键字的语法.