线性渐变div组

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>

线性渐变div组

linear gradient divs group

css

linear-gradients