Question

我在尝试使用线性渐变样式时遇到了麻烦。我分别针对div的4个边，每个边都有自己的线性渐变值。我似乎无法将它们全部正确显示在一起，所以我试图将它们隔离开来。

它们似乎都是单独工作的，但是当我将它们一次一个地添加到一起时，显示屏中会出现故障，而不仅仅是线性渐变。当这些属性处于线性渐变属性下时，我已经将边框和填充消失了。我通过将它们移到线性渐变属性上来解决了这个问题。

在下面的代码中，从右到左的渐变效果很好，但颜色是从左到右的渐变。（另外两方目前已被评论出来）。这只是我尝试将它们组合时遇到的许多问题之一。我做错了什么？

.inset-container {
  padding: 20px;
  border: 2px solid red;
  background: linear-gradient(to left, rgba(31, 122, 122, 0.7), rgba(235, 250, 250, 0.1), rgba(255, 255, 255, 1)),
  linear-gradient(to right, rgba(31, 122, 122, 0.7), rgba(235, 250, 250, 0.1), rgba(255, 255, 255, 1));
  /*
  linear-gradient(rgba(31, 122, 122, 0.7), rgba(235, 250, 250, 0.1), rgba(255, 255, 255, 1))
  linear-gradient(to top, rgba(31, 122, 122, 0.7), rgba(235, 250, 250, 0.1), rgba(255, 255, 255, 1));
  */
}               

.inset {
  max-width: 92%;
  margin: auto;
  border: 2px solid black;    
}

<div class="inset-container">
  <div class="inset">
    <h3>Included in this month’s newsletter:</h3>
    <p><a href="#Safety" class="links">Safety First: Prescription Safety Glasses</a>  - Find out who pays that bill in this months Safety First.</p>        
    <p><a href="#Flux" class="links">Flux</a> - Which way to the problem? Splitters messing with your head? Read this Flux tip for clarification.</p>
    <p><a href="#MDUMaps" class="links">Tool Tip: MDU Maps</a> - Hey, My maps are blank in Divisional Viewer! Well, you’re doing it wrong!</p>
    <p><a href="#XM1" class="links">Tool Tip: XM1 Plant Design Maps</a> - Why does all the cool stuff go to the service department?</p>
    <p><a href="#Battery" class="links">The Battery Balancer</a> - How much more can we fit in that cabinet?!</p>
    <p><a href="#DMTicketing" class="links">DM Ticketing</a> - SASQ Watch because Big Bird was taken.</p>
    <p><a href="#ONX" class="links">Viavi’s ONX-630</a> - Initializing…… That’s an inside joke! You’ll get it later or will you? Just read this for a quick overview of the new meter.</p>
    <p><a href="#Tales"class="links">Tales From The Field</a> - Hello, Hello, HELLO! It’s ok to share with the group! Send us your pics!</p>
  </div>
</div>

修复线性渐变

0 个答案: