Html webkit边框图像中的参数是如何工作的？不'；似乎没有关联
我试着做一个从右到左的底部渐变。虽然我有这个工作，它没有任何意义，我和奇怪的事情发生了微小的变化 提供从右到左的右渐变Html webkit边框图像中的参数是如何工作的？不'；似乎没有关联,html,css,google-chrome,webkit,Html,Css,Google Chrome,Webkit,我试着做一个从右到左的底部渐变。虽然我有这个工作，它没有任何意义，我和奇怪的事情发生了微小的变化 提供从右到左的右渐变 -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(
-webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 100% 0;
border-bottom-width: 5px;
-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>
规范中的错误在于，您假设-webkit border image将在您提供的图像中“剪切”一个孔（最后，您提供的渐变将用作图像）。也就是说，一旦你将图像切割成9块（它在水平方向上被切割成3块，在垂直方向上被切割成3块），角将用于角，边中的边将被使用，而中心部分将被丢弃 这是错误的。中心件将用于中心；如果你不想把背景写得太多，你有责任让它透明化 关于你的评论，我准备了一个演示，这样就可以看到发生了什么。您的两个示例都是有限的，在演示中，我设置了一个背景，以便更容易看到发生了什么。它显示在右侧作为参考。我在中间，你从100%过渡到0% 增加 /*这将显示背景中的渐变和作为背景色的边框*/
-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%，则不会为底部部分拍摄任何图像。OK，那么
100%<!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>
.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);
}