css - 渐变叠加在右侧的元素上

Question

我创建了一个包含可滚动元素的容器。我希望右侧的元素具有渐变叠加。我如何使用 CSS 创建它？

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 1000px;
}

.element {
  min-width: 200px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
}

<div class="container">
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
</div>

https://codepen.io/naomilea/pen/RjZGaM

Answer 1

如果您只是寻找具有渐变颜色的最后一个元素，您可以像这样编写您的 css:

   .container {
  
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 1000px;
}
.element {
    min-width: 200px;
    height: 100px;
    background-color: grey;
    margin-right: 10px;

  }
.element:last-child
{
  background: -webkit-linear-gradient(to right, grey, white);
  background: -o-linear-gradient(to right, grey, white);
  background: -moz-linear-gradient(to right, grey, white);
  background: linear-gradient(to right, grey, white);
}

<div class="container">
  <div class="element">
  </div>
   <div class="element">
  </div>
   <div class="element">
  </div>
   <div class="element">
  </div>
   <div class="element">
  </div>
   <div class="element">
  </div>
 <div class="element">
  </div>
 
 
 
</div>

Check updated codepen