线性梯度divs组

Question

我在布局中有这样的元素。被图片插入（png） 考虑到我需要自适应，carinka不适合我。可以将渐变用作子元素吗？

background-image: linear-gradient(to left, #4747f6 0%, #f27d66 100%);

Answer 1

一个想法是依靠background-attachment:fixed，您将能够对每个元素应用渐变，结果将像您有一个渐变：

.container {
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 0;
  background: linear-gradient(to left, #4747f6 0%, #f27d66 100%) center/100% 4px no-repeat;
}

.container>div {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to left, #4747f6 0%, #f27d66 100%) fixed;
}

.container:before,
.container:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% - 5px);
  height: 10px;
  left: 0;
  width: 10px;
  border-radius: 50%;
  background: linear-gradient(to left, #4747f6 0%, #f27d66 100%) fixed;
}

.container:after {
  right: 0;
  left: auto;
}

body {
  margin: 0;
}

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