有什么方法可以将渐变背景转换为＆＃34; border-left＆＃34;？

Question

而不是div的整个背景是渐变，我只想要＆＃34; border-left＆＃34;是：

http://i.gyazo.com/0e1273fd4f407b767a31b4184fcfe801.png

我也希望没有混合在一起的颜色，如上图所示。

Answer 1

您可以使用带有线性渐变背景的伪元素到底部和停靠点：

.wrap {
  background: rgba(0,0,0,0.3);
}

.border-test {
  position: relative;
  width: 80px;
  margin: 100px;
  padding: 20px;
  background: white;
}
.border-test::after {
  content: '';
  position: absolute;
  width: 2px;
  left: 5px;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(
  to bottom,
    #ff0000,
    #ff0000 33%,
    #00ff00 33%,
    #00ff00 66%,
    #0000ff 66%
  );
}

有关codepen的完整工作演示：http://codepen.io/simoncmason/pen/gbeaGB

要在乐队中获得更多颜色，只需使用更多颜色以不同百分比添加更多停靠点。