有没有办法为特定像素创建css3边框渐变？

Question

我知道这可能是背景渐变，但无法弄清楚如何为边框渐变实现这一点。

这是我到目前为止所拥有的

-webkit-border-image  : -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#000)) 1 100%; 
-webkit-border-image  : -webkit-linear-gradient(#666, #000) 1 100%; 
-moz-border-image     : -moz-linear-gradient(#666, #000) 1 100%; 
-o-border-image       : -o-linear-gradient(#666, #000) 1 100%; 
border-image          : linear-gradient(to bottom, #666, #000) 1 100%;

我希望从下往上的第一个32px为黑色，然后其余的向上灰色（＃666）。

Answer 1

我建议你这样做： 使用位于pseudo-element和:before的{​​{1}} bottom:0，因为left:-15px是边框的宽度。如果您更改15px，则更改border-width

同样适用于left:-15px

我使用了width:15px和width:15px，但你可以简单地使用background:#000而不是那两个。结果是一样的。

＆＃13;

＆＃13;

border-left:15px solid #000

＆＃13;

.borderme {
  position:relative;
  height:300px;
  border-left:15px solid #666;

}
.borderme:before {
  position:absolute;
  height:32px;
  width:15px;
  background:#000;
  bottom:0;
  left:-15px;

  content:"";
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

选中此site，您可以在其中创建css渐变并获取代码并粘贴到您的CSS中。