webkit-border-image中的参数如何工作？ 似乎没有关联

Question

我正在尝试做一个从右到左的底部渐变。 当我进行这项工作时，对我来说是没有意义的，微小的变化会发生奇怪的事情。

从右到左给出正确的渐变

-webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 100% 0;
border-bottom-width: 5px;

这会将渐变置于DIV的背景中？！

-webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 0 0;
border-bottom-width: 5px;

这是我所了解的，而我不了解的：

从规格来看，它说明了以下内容：

-webkit-border-image: <function> <top> <right> <bottom> <left>

是这个意思：

<top> The distance from the top edge of the image.
<right> The distance from the right edge of the image.
<bottom> The distance from the bottom edge of the image.
<left>  The distance from the left edge of the image.

因此，这意味着我的第一个0 0 100% 0应该具有距底部100％的边框图像（即渐变）！ 但这恰恰相反。 取而代之的是，这是唯一显示底部边框渐变的图形，因此它与底部的距离实际上为0。

为什么将所有这些值设置为0会使渐变成为div的背景？ 实际上，如果div具有background-color ，则将border-image的top，right，bottom和left都设置为0将会在背景颜色上绘制边框渐变！

这一切如何运作？

工作示例（您可以将其更改为其他值）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Abbott RealTime</title>
        <style>
            .test
            {
                position: relative;
                top: 0px;
                left: 0px;
                width: 300px;
                height: 200px;
                margin:0;
                padding:0;
                border:0;
                outline:0;
                font-size:100%;
                vertical-align:baseline;
                background:transparent;
                background-color: #ffcc33;
                /* This shows the bottom border properly */
                -webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 100% 0;

                /* This one would show the gradient in the background and the border as the background color! */
                /*-webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 100% 0;*/

                border-bottom-width: 5px;
            }
        </style>
    </head>
    <body>
        <div class="test">test</div
    </body>
</html>

Answer 1

您从规范中得出的错误是，您假定-webkit-border-image将在您提供的图像中“切出”一个孔（最后，您提供的渐变将用作图像）。 也就是说，一旦将图像切成9个片段（水平切成3个，垂直切成3个），则将在角上使用角，在边缘中使用边缘，并丢弃中心部分。

错了 中央部分将在中央使用； 如果您不想覆盖背景，则有责任确保其透明。

关于您的评论，我准备了一个演示，以便可以看到发生了什么。 您的两个示例都是极限示例，在演示中，我设置了一个背景，可以更轻松地了解发生了什么。 它显示在右侧作为参考。 在中间，您在过渡期间从100％变为0％

添加了演示

.test1 {
    left: 0px;
      /* This shows the bottom border properly */
    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 100% 0%;
}

.test2 {
    left: 320px;

/ *这将显示背景中的渐变和边框作为背景色！ * /

    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 0% 0%;
    -webkit-transition: all 5s;
}
.test2:hover {
    left: 320px;
    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 100% 0%;
}

.bg {
    left: 640px;
    background: linear-gradient(45deg, black, transparent, red);
}

更具体地说，该百分比指定背景图像的哪个部分用于底部。 如果指定100％，则将所有图像作为底部。 （并且中间和上部没有图像）。 您可以看到渐变如何在那里压缩。 如果指定0％，则底部不会拍摄任何图像。