无需CSS nth-child实现带文字的环形径向气泡渐变效果

你可以通过给特定元素添加类名来替代nth-child选择器，这种方式更直观，不用担心元素位置变化导致样式失效，尤其适合新手维护代码。

先看你现有的代码：

.circle {
  position: absolute;
  width: 500px;
  height: 500px;
  background: linear-gradient(90deg, #49aeff, #ff4c89);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle i {
  position: absolute;
  background: linear-gradient(90deg, #49aeff, #ff4c89);
  z-index: 2;
  inset: -5px;
  filter: blur(50px);
  border-radius: 50%;
}

.circle i:nth-child(4) {
  background: #fff;
  z-index: 3;
  inset: 5px;
}

.circle j {
  position: absolute;
  inset: -5px;
  z-index: 2;
  border-radius: 50%;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.25);
  inset: 20px 20px 50px rgba(0, 0, 0, 0.15);
}

修改方案 #

核心思路是把依赖位置的nth-child(4)换成类选择器，同时补充文字容器的样式（你原来的代码未体现文字部分，这里一并完善）。

修改后的HTML结构

<div class="circle">
  <!-- 外层模糊渐变层 -->
  <div class="outer-blur"></div>
  <!-- 阴影层 -->
  <div class="shadow-layer"></div>
  <!-- 白色内层（替代原i:nth-child(4)） -->
  <div class="inner-white-bg"></div>
  <!-- 文字容器 -->
  <div class="text-content">环形渐变气泡</div>
</div>

修改后的CSS代码

.circle {
  position: relative; /* 新增：让内部绝对定位元素以它为基准 */
  width: 500px;
  height: 500px;
  background: linear-gradient(90deg, #49aeff, #ff4c89);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 外层模糊渐变层，替代原.circle i */
.outer-blur {
  position: absolute;
  background: linear-gradient(90deg, #49aeff, #ff4c89);
  z-index: 2;
  inset: -5px;
  filter: blur(50px);
  border-radius: 50%;
}

/* 阴影层，替代原.circle j */
.shadow-layer {
  position: absolute;
  inset: -5px;
  z-index: 2;
  border-radius: 50%;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.25),
              inset 20px 20px 50px rgba(0, 0, 0, 0.15);
}

/* 白色内层，替代原.circle i:nth-child(4) */
.inner-white-bg {
  position: absolute;
  background: #fff;
  z-index: 3;
  inset: 5px;
  border-radius: 50%;
}

/* 文字容器，放在最上层 */
.text-content {
  z-index: 4;
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

优势说明 #

• 不依赖元素在父容器中的位置，后续调整HTML结构（如新增/删除元素）不会导致样式错乱
• 类名语义化，看类名就能知道元素作用，新手更容易理解和维护
• 替换了非标准标签（原代码的<i>``<j>），使用标准<div>更符合HTML规范

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