我不希望div的整个背景是渐变的,我只希望"左边界"是:
http://i.gyazo.com/0e1273fd4f407b767a31b4184fcfe801.png
我也希望它没有颜色混合在一起,如上图所示。
您可以使用一个伪元素,该元素具有从底部到底部的线性渐变背景和停止符:
.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
为了在乐队中获得更多的颜色,只需用更多的颜色以不同的百分比添加更多的停顿。