html - 在CSS中给垂直线设置渐变

Question

我在 html 中使用了一条垂直线，我想为其提供渐变。我已经尝试了一切，但没有一个对我有用。这是我的代码:

.vline
    {
      border-left: 5px solid green;   /* this green color gets displayed and not the gradient */
      
      background: #67B26F;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #4ca2cd, #67B26F);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #4ca2cd, #67B26F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 
                                                                26+, Opera 12+, Safari 7+ */
      height: 50px;
    }

<div class="vline"></div>

编辑:显示我在左边框中定义的绿色。梯度不是。它应该覆盖以前的颜色。

Answer 1

您能检查一下下面的代码吗？希望它对你有用。我们根据您的要求使用伪元素来制作渐变边框。

请引用此链接:https://jsfiddle.net/yudizsolutions/9noqwj0c/1/

.vline {
  position: relative;
  background: #67B26F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #4ca2cd, #67B26F);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #4ca2cd, #67B26F);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome                                                         26+, Opera 12+, Safari 7+ */
  height: 50px;
  padding-left: 10px;
}


.vline:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: rgb(219, 85, 83);
  background: -webkit-linear-gradient(top, rgba(219, 85, 83, 1) 0%, rgba(183, 183, 25, 1) 100%);
  background: linear-gradient(to bottom, rgba(219, 85, 83, 1) 0%, rgba(183, 183, 25, 1) 100%);

}

<div class="vline"></div>