2

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

从右到左给出正确的渐变

-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，将边框图像的顶部、右侧、底部和左侧全部设置为 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>
4

1 回答 1

0

您从规范中得到的错误是您假设 -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%，则不会为底部拍摄任何图像。

于 2013-06-20T20:41:25.567 回答