4

我想知道是否可以单独使用 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;
}

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

.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 是如何让页面知道方向的，我认为它只是一个小小的、简单的、被忽视的编辑，我现在似乎无法及时找到，因此我提出了这个问题寻求帮助。

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

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

最好的问候，蒂姆

4

2 回答 2

6

注意- 编辑 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”指向右侧。

使用关键字

如果参数是“to top”、“to right”、“to bottom”或“to left”，则渐变线的角度分别为“0deg”、“90deg”、“180deg”或“270deg” .

如果参数指定了盒子的一个角，例如“到左上角”，则渐变线必须倾斜，使其指向与指定角相同的象限，并且垂直于与两个相邻角相交的线。渐变框。这会导致 50% 的色标与两个相邻的角相交（参见示例）。

从渐变框的中心开始，在两个方向上以指定的角度延伸一条线。终点是渐变线上的点，垂直于渐变线的线将在指定方向上与渐变框的角相交。起点的确定方式相同，但方向相反。

并且来自 MDN，一些关于为什么学位不同的行政人员（怪苹果？）：

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

于 2013-03-26T01:01:11.110 回答
0

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

于 2013-03-26T00:44:24.450 回答