Question

嘿我在CSS中有这个代码：

.gradient-four {
  height: 100px;
  width: 100px;
  margin: 5px auto;
  border-radius: 50%;
  float: left;
  background-image: radial-gradient( circle closest-side, red, purple);
}

<div class="gradient-four"></div>

它适用于div。我怎么能重复那个div，而不是一遍又一遍地重复代码？我尝试了背景重复，但这不会成功。这可能吗？谢谢

Answer 1

要重复线性/径向背景，您只需指定一个大小，然后您可以调整背景重复以选择重复方式：

.gradient-four {
  height: 100px;
  width: 100px;
  margin: 5px auto;
  border-radius: 50%;
  float: left;
  background-image: radial-gradient( circle closest-side, red, purple);
  background-size:50px 50px;
}

<div class="gradient-four"></div>

<div class="gradient-four" style="background-repeat:repeat-x"></div>
<div class="gradient-four" style="background-repeat:repeat-y"></div>

如果您想重复整个div的结果，可以像这样调整渐变：

.gradient-four {
  height: 500px;
  width: 500px;
  margin: 5px auto;
  float: left;
  background-image: radial-gradient( circle closest-side, red, purple 98%, transparent 100%);
  background-size:100px 100px;
}

<div class="gradient-four"></div>

Answer 2

使用repeating-radial-gradient功能。它采用与radial-gradient相同的参数并且功能相同，只是重复。

Answer 3

像这样使用repeating-radial-gradient：

.gradient-four {
  height: 100px;
  width: 100%;
  margin: 5px auto;
  float: left;
  background-image: -webkit-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
  background-image: -moz-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
  background-image: -ms-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
  background-image: repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
  background-size: 100px 100px;
}

JSFiddle

在div中重复渐变

3 个答案: