如何用Bootstrap 4实现三个嵌套、不同透明度的响应式圆形（当前为椭圆）

嘿，我来帮你解决这个嵌套圆形变椭圆的问题！

首先，你遇到的椭圆问题核心原因不是透明度或者定位本身，而是没有严格维持容器的宽高1:1比例。当元素的宽高不相等时，border-radius:50%就会变成椭圆，再加上绝对定位如果没有正确居中或约束尺寸，就会放大这个问题。接下来给你一套基于Bootstrap 4的响应式嵌套圆形实现方案，保证是正圆且适配各种屏幕：

实现思路 #

1. 用padding-top维持响应式圆形比例：padding的百分比是相对于父元素宽度计算的，设置padding-top:100%就能让容器高度等于宽度，形成完美的正方形基础，再加上border-radius:50%就是正圆。
2. 同心嵌套的定位技巧：父容器设为position:relative，子圆形用position:absolute+transform:translate(-50%,-50%)实现精准居中，同时用百分比设置子圆形的宽高，保证嵌套后依然是同心正圆。
3. 结合Bootstrap 4的工具类：用Bootstrap的flex布局类快速实现整体居中，减少自定义CSS代码。

完整代码示例 #

HTML部分

<!-- 父容器：用Bootstrap的flex类实现水平垂直居中，背景图铺满 -->
<div class="container bg-image d-flex justify-content-center align-items-center" style="min-height: 100vh; padding: 2rem;">
  <!-- 圆形容器：用来约束三个嵌套圆的尺寸 -->
  <div class="circle-wrapper">
    <div class="circle circle-outside"></div>
    <div class="circle circle-middle"></div>
    <div class="circle circle-inside"></div>
  </div>
</div>

CSS部分

.bg-image {
  background-image: url("../../../assets/sfondi/iStock-612391600_1500px.jpg");
  background-size: cover;
  background-position: center;
}

.circle-wrapper {
  position: relative;
  width: 80%; /* 控制圆形整体大小，响应式适配 */
  max-width: 500px; /* 限制最大宽度，避免在大屏上过大 */
}

/* 关键：用伪元素让容器高度等于宽度，形成正方形 */
.circle-wrapper::after {
  content: "";
  display: block;
  padding-top: 100%;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 完美居中：向左向上移动自身尺寸的50% */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #你的颜色; /* 替换成你需要的颜色 */
}

/* 外层圆：占满容器 */
.circle-outside {
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

/* 中间圆：占容器的80% */
.circle-middle {
  width: 80%;
  height: 80%;
  opacity: 0.75;
}

/* 内层圆：占容器的60% */
.circle-inside {
  width: 60%;
  height: 60%;
  opacity: 0.9;
}

关键说明 #

• circle-wrapper::after的padding-top:100%是实现响应式正圆的核心，不管屏幕宽度怎么变，容器的宽高始终保持1:1，所以border-radius:50%一定是正圆。
• transform:translate(-50%,-50%)比用margin居中更灵活，它是基于元素自身尺寸计算偏移量，不管子圆大小如何，都能精准居中在父容器里。
• 你可以调整circle-wrapper的width和各子圆的宽高百分比，来控制整体大小和嵌套间距，完全适配响应式需求。

这样修改后，三个圆形就会是完美的同心正圆，而且在手机、平板、桌面端都能自动适配缩放啦！

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