能否借助CSS引用父元素未知/可变高度设置border-radius的宽度？

我需要给一个可缩放元素的左右两端做圆形端盖，要求端盖的半径始终等于父元素高度的一半。但CSS里border-radius的百分比值，水平方向是相对父元素宽度，垂直方向是相对父元素高度，直接用百分比没法实现“水平半径等于父元素高度的50%”的需求，而且父元素高度是可变的，没有固定长度可以用。试过用CSS自定义属性，但不确定怎么正确引用父元素的高度值。

方案1：纯CSS容器查询（推荐，现代浏览器支持） #

利用CSS容器查询可以直接获取父容器的尺寸，完美匹配需求：

/* 父元素设置为容器 */
.parent {
  container-type: size;
  container-name: parent-container;
  /* 父元素高度可变，这里可以设为任意值，比如随内容自适应或百分比 */
  height: auto;
}

/* 需要添加端盖的子元素 */
.scaling-element {
  height: 100%; /* 子元素高度和父元素一致 */
  width: 100%; /* 子元素宽度自适应父元素 */
  background: #2563eb;
  /* 直接用容器高度计算半径 */
  border-radius: calc(container(height, parent-container) / 2);
}

这个方案中，container(height, parent-container)会实时获取父容器的高度，除以2后作为border-radius的值，不管父元素高度怎么变，端盖的半径始终是父高的一半，左右两端会呈现完美的半圆效果。

方案2：伪元素模拟圆形端盖（兼容旧浏览器） #

如果需要兼容不支持容器查询的浏览器，可以用伪元素单独绘制左右圆形端盖：

.parent {
  position: relative;
  overflow: hidden; /* 防止圆形超出父元素 */
  height: auto; /* 父元素高度可变 */
}

.scaling-element {
  height: 100%;
  width: calc(100% - 100%); /* 留出左右圆形的位置，这里100%是父元素高度的占比 */
  margin: 0 auto;
  background: #2563eb;
}

/* 左侧圆形端盖 */
.scaling-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  aspect-ratio: 1/1; /* 让宽度等于高度，形成正方形 */
  border-radius: 50%; /* 转成圆形 */
  background: #2563eb;
}

/* 右侧圆形端盖 */
.scaling-element::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #2563eb;
}

这个方案通过伪元素生成两个和父元素同高的圆形，分别定位在左右两端，中间的矩形元素填充剩余空间。需要注意的是，如果父元素宽度小于高度，中间元素的宽度会变成负数，这时候可以给父元素设置最小宽度，或者调整逻辑让整体自适应。

方案3：JS动态更新CSS变量（兼容所有浏览器） #

如果需要完全兼容所有浏览器，可以用JS实时获取父元素高度，更新到CSS变量中：

.parent {
  height: auto;
}

.scaling-element {
  height: 100%;
  width: 100%;
  background: #2563eb;
  border-radius: calc(var(--parent-height) / 2);
}

// 获取元素
const parent = document.querySelector('.parent');
const element = document.querySelector('.scaling-element');

// 更新父元素高度到变量
function updateParentHeight() {
  const height = parent.offsetHeight;
  element.style.setProperty('--parent-height', `${height}px`);
}

// 初始化执行
updateParentHeight();

// 监听窗口大小变化
window.addEventListener('resize', updateParentHeight);

// 如果父元素高度会随内容变化，还需要监听内容变化事件，比如MutationObserver
const observer = new MutationObserver(updateParentHeight);
observer.observe(parent, { childList: true, subtree: true });

这个方案通过JS实时获取父元素高度，将值存入CSS变量，再用calc计算半径。优点是兼容性拉满，缺点是需要额外的JS代码，且要处理父元素高度变化的各种场景。

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