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也有reasonable tutorial如何处理这种跨浏览器。

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

<强> 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，some administrivia了解学位差异的原因（归咎于Apple？）：

前缀变体之间仍然存在最后的语义好奇心和没有前缀的提案。在最初的Apple提案之后，语法的前缀变体全部使用定义的<angle> 极角，即代表东方的0deg。要连贯一致与CSS的其余部分一起，规范定义了0deg的角度代表北方。阻止网站使用前缀版本财产突然破裂，即使在适应其他方面前向兼容的最终语法，它们保持原始角度定义(0deg = East)。他们将在何时切换到正确的规格无所畏惧。另外，因为它们不兼容，Gecko 支持前缀，带有to关键字和不带的语法。同样，没有关键字的语法将被删除 unprefixing。

Answer 2

至少对于webkit，它设置了从右到左的角度： -webkit-linear-gradient（180deg，black，white）

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

2 个答案: