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

【问题标题】：How do the parameters in webkit-border-image work? Doesn't seem to correlatewebkit-border-image 中的参数是如何工作的？似乎没有关联
【发布时间】：2013-06-16 20:30:56
【问题描述】：

我正在尝试做一个从右到左的底部渐变。虽然我有这个工作，但对我来说毫无意义，而且微小的变化就会发生奇怪的事情。

从右到左给出正确的渐变

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

以下是我了解和不了解的：

来自spec，它说：

-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 会在背景颜色上绘制border渐变！

这一切是如何运作的？

工作示例（您可以将其更改为不同的值）

<!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>

【问题讨论】：

标签： html css google-chrome webkit

【解决方案1】：

您从规范中得到的错误是您假设 -webkit-border-image 会在您提供的图像中“切割”一个洞（最后，您提供的渐变被用作图像）。也就是说，一旦你将图像切成 9 块（它被水平切成 3 块，垂直切成 3 块），角落将用于角落，边缘将用于边缘，而中心部分将被丢弃。

这是错误的。中心件将用于中心；如果你不想让背景被覆盖，那么你有责任让背景变得透明。

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

已添加demo

.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%，则 all 您的图像将被拍摄到底部。（中间和上部没有留下任何图像）。您可以看到那里的梯度是如何压缩的。如果您指定 0%，则不会为底部拍摄任何图像。

【讨论】：

好的，那么100%与底部的距离如何导致图像显示在底部？（我还是一头雾水）