有没有办法为特定像素创建 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

我建议你这样做：使用像 :before 这样的 pseudo-element ，您将其定位在 bottom:0 和 left:-15px 处，因为 15px 是边框的宽度。如果你改变 border-width 你改变 left:-15px

同样是 width:15px

我使用了 width:15px 和 background:#000，但您可以简单地使用 border-left:15px solid #000 而不是这两个。结果是一样的。

.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:"";
}

<div class="borderme">

</div>

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

Is there a way to create a css3 border gradient to a specific pixel?

css

linear-gradients