有啥办法可以将渐变背景转换为“左边框”？

Posted 2023-03-06

【中文标题】有啥办法可以将渐变背景转换为“左边框”？

【英文标题】：Is there any way I could transform a gradient background to "border-left"?有什么办法可以将渐变背景转换为“左边框”？

【发布时间】：2015-04-18 12:43:44

【问题描述】：

我不希望 div 的整个背景是渐变的，而是只希望“左边框”为：

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

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

【问题讨论】：

请看这里：***.com/questions/4062001/css3-border-opacity

【参考方案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

要在波段中获得更多颜色，只需以不同的百分比添加更多的停靠点和更多颜色。