webkit-border-image 中的参数是如何工作的？似乎没有关联
Posted
技术标签:
【中文标题】webkit-border-image 中的参数是如何工作的？似乎没有关联【英文标题】：How do the parameters in webkit-border-image work? Doesn't seem to correlate 【发布时间】：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>
【问题讨论】：
【参考方案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%与底部的距离如何导致图像显示在底部？ （我还是一头雾水）以上是关于webkit-border-image 中的参数是如何工作的？似乎没有关联的主要内容，如果未能解决你的问题，请参考以下文章