如何重复应用CSS径向渐变样式的div而不重复代码？

首先得澄清一下：background-repeat 是用来控制背景图像在元素内部的重复方式的，而你要的是重复生成整个 <div> 元素，所以这个属性完全不适用，这也是它无效的原因~

下面给你几种不用重复编写CSS代码的实现方式：

1. 直接复用CSS类（最简单的方式） #

你的CSS只需要写一次，在HTML里多次引用这个类就行了，这不算重复代码（核心样式只定义了一次）：

<div class="gradient-four"></div>
<div class="gradient-four"></div>
<div class="gradient-four"></div>
<!-- 想要多少个就加多少个 -->

对应的CSS还是你原来的代码，完全不用修改：

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

2. 用JavaScript动态生成元素 #

如果需要大量重复生成，手动写HTML太麻烦，可以用JS循环创建元素并添加类：

// 获取要插入这些div的容器，比如body或者某个特定元素
const container = document.body;
// 生成5个示例，你可以修改数量
for(let i = 0; i < 5; i++) {
  const div = document.createElement('div');
  div.classList.add('gradient-four');
  container.appendChild(div);
}

这种方式HTML里只需要留好容器，JS负责批量生成，CSS依然只写一次。

3. 用CSS伪元素实现少量额外元素（适合2个以内） #

如果只需要1-2个额外的渐变圆，可以给一个父元素添加伪元素，复用相同的样式：

.gradient-container {
  position: relative;
  /* 父元素需要定位，让伪元素可以基于它定位 */
}
.gradient-four, .gradient-container::before, .gradient-container::after {
  height: 100px; 
  width: 100px; 
  margin: 5px; 
  border-radius: 50%; 
  background-image: radial-gradient( circle closest-side, red, purple); 
}
.gradient-container::before, .gradient-container::after {
  content: '';
  position: absolute;
  left: 120px; /* 调整位置避免重叠 */
}
.gradient-container::after {
  left: 240px;
}

然后HTML这样写：

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

这种方式不用多写HTML元素，但伪元素最多只能用2个，适合少量重复的场景。

总结 #

• 少量重复：直接复制HTML元素复用类最方便
• 大量重复：用JS动态生成更高效
• 极少量（1-2个）：可以尝试伪元素方案

内容的提问来源于stack exchange，提问作者Ricardo Moreira