CSS+jQuery实现动态圆形上方三侧边边框自适应对齐

核心问题是原代码将U型边框与圆形容器设为同级DOM节点，二者无定位绑定关系，圆形尺寸动态变化时边框无法自动跟随对齐。

第一步：调整DOM结构 #

把U型边框.border移动到.circles容器内部，作为圆形元素的同级子元素，让边框可以相对于圆形容器做绝对定位，天然跟随容器尺寸变化。
核心DOM结构修改如下：

<div class="circles">
  <div class="border"></div>
  <span class="circle"></span>
  <span class="circle2"></span>
</div>

第二步：修改CSS定位规则 #

• 将.border的定位模式从相对定位改为绝对定位，固定在圆形容器顶部居中位置
• 给.circles容器增加顶部内边距，为U型边框预留展示空间，避免和圆形重叠错位
• 调整元素层级，保证U型边框叠在圆形上方显示，移除原代码中会导致元素被父容器遮挡的负z-index值
  完整修改后的样式代码：

.circles {
  margin-top: 50px;
  position: relative;
  /* 给顶部U型边框预留100px高度的展示空间 */
  padding-top: 100px;
}

.circle {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1;
  left: 50%;
  /* 圆形定位在边框下方区域，自动居中 */
  top: calc(100px + 50%);
  position: absolute;
  transform: translate(-50%, -50%);
}

.circle2 {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1;
  left: 50%;
  top: calc(100px + 50%);
  transform: translate(-50%, -50%);
}

.border {
  /* 相对于.circles容器绝对定位 */
  position: absolute;
  top: 0;
  left: 50%;
  /* 水平居中对齐容器中心线 */
  transform: translateX(-50%);
  border-top: 2px solid blue;
  border-right: 1px solid blue;
  border-left: 1px solid blue;
  /* 高度与预留的顶部内边距一致 */
  height: 100px;
  width: 300px;
  z-index: 2;
}

第三步：调整JS尺寸计算逻辑 #

• 外圆尺寸更新时，移除手动计算top/left偏移的冗余逻辑，圆形已通过transform属性自动居中，仅需设置宽高即可；同步更新.circles容器的宽高，保证容器完整包裹圆形和顶部边框
• 内圆尺寸更新逻辑仅保留宽高设置，移除冗余的偏移计算
• 刀具尺寸输入时，补上和圆形一致的3.75比例换算，保证边框和圆形的尺寸比例匹配，无需额外调整位置，边框会自动对齐圆形中心线
  修改后的完整JS代码：

$(function() {
  $('.circle').hide();
  $('#outer_diameter').on('change', function() {
    var outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var converted = (outer_diameter * 3.75).toFixed(3);

    if (outer_diameter > 85) {
      $("#error").text(outer_diameter + " is too big").show();
      return false;
    }

    if (outer_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    $('.circle').css({
      height: (2 * converted),
      width: (2 * converted)
    });
    $('.circle').fadeIn(300);
    // 容器宽度和外圆一致，高度=外圆直径+顶部边框高度
    $('.circles').css({
      height: (2 * converted) + 100,
      width: (2 * converted)
    })
    $('#error').hide();
  })

  $('.circle2').hide();
  $('#inner_diameter').on('change', function() {
    var outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var converted_2 = ((outer_diameter * 3.75) - (2 * (inner_diameter * 3.75))).toFixed(3);

    if (outer_diameter > 85) {
      $("#error")
      return false;
    }

    if (inner_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    if (inner_diameter >= 0.33 * outer_diameter) {
      $('#error').text('Wall Thickness invalid').show();
      return false;
    }

    $('.circle2').css({
      height: (2 * converted_2),
      width: (2 * converted_2)
    });
    $('.circle2').fadeIn(300);
    $('#error').hide();
  })

  $('.border').hide();
  $('#cutter').on('change', function() {
    var cutter = parseFloat($("#cutter").val()).toFixed(3);
    // 和圆形使用相同的缩放系数，保证尺寸比例一致
    var cutterConverted = (cutter * 3.75).toFixed(3);
    $('.border').css({
      width: cutterConverted
    })
    $('.border').fadeIn(300);
  })
});

效果说明 #

修改后所有元素都以.circles为统一的定位父容器：

• 外圆、内圆始终在容器下半部分自动居中
• U型边框始终在容器顶部水平居中，左右侧边垂直向下，与圆形中心线完全重合
• 无论输入的外径、内径、刀具尺寸如何变化，三者相对位置不会错位，完全匹配参考展示效果

注意：原代码直接用刀具输入值设置边框宽度，未和圆形的3.75缩放系数统一，会导致尺寸比例失真，上述JS逻辑已补上该换算。

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