如何在不同的屏幕尺寸之间改变html中渐变线的方向?

Question

我的问题是我在html中创建了一些div之间的垂直梯度线。当我用@media查询移动到移动视图时，我会关闭它们。我想做的是在移动到移动视图时将这些线的方向改变为水平方向。我正在使用bootstrap类，我需要考虑移动优先的方法。

总结:
NOT on mobile-view ->竖线
移动视图->水平线 这是我的HTML:

<section class="container">
  <div class="row">
      <div class="col-xs-12 col-md-4 VerticalAfter">
                SOME TEXT
      </div>
      <div class="col-xs-12 col-md-4"> 
                SOME TEXT
      </div>
      <div class="col-xs-12 col-md-4 VerticalBefore">
                SOME TEXT
      </div>
   </div>
</section>

CSS:

@media screen and (min-width: 768px) {
  .VerticalAfter:after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom,
      color-stop(0%,rgba(208,228,247,0)),
      color-stop(24%,rgba(115,177,231,0.48)),
      color-stop(50%,rgba(12,16,255,1)),
      color-stop(79%,rgba(83,159,225,0.42)),
      color-stop(100%,rgba(135,188,234,0))
    );
    right: 0;
  }
  .VerticalBefore:before {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom,
      color-stop(0%,rgba(208,228,247,0)),
      color-stop(24%,rgba(115,177,231,0.48)),
      color-stop(50%,rgba(12,16,255,1)),
      color-stop(79%,rgba(83,159,225,0.42)),
      color-stop(100%,rgba(135,188,234,0))
    );
    left: 0;
  }
}

Answer 1

你使用的线性梯度语法是来自和旧的webkit实现，绝对不应该再使用了!

你可以直接使用

background-image: linear-gradient(to right, rgba(208,228,247,0) 0%, rgba(115,177,231,0.48) 24%, rgba(12,16,255,1) 50%, rgba(83,159,225,0.42) 79% rgba(135,188,234,0) 100%);

并通过将ro right替换为to bottom来适应桌面视图:

@media screen and (min-width: 768px) {
    background-image: linear-gradient(to right, rgba(208,228,247,0) 0%, rgba(115,177,231,0.48) 24%, rgba(12,16,255,1) 50%, rgba(83,159,225,0.42) 79% rgba(135,188,234,0) 100%);
}

编辑:如何使用线性梯度():https://developer.mozilla.org/de/docs/Web/CSS/linear-gradient