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;

这是我理解的和我不理解的：

来自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 all设置为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>

Answer 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％，全部，您的图片将作为底部。（并没有留下中间和上部的图像）。你可以看到渐变压缩的方式。如果指定0％，则不会为底部拍摄任何图像。

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

1 个答案: