div添加CSS transform属性后border-radius显示异常问题

transform: scaleX() 会对元素的整个渲染结果做横向压缩，border-radius的水平圆角半径也会跟着一起被缩放。
父子元素同样设置20px圆角时，父元素没有做变换，圆角是正常正圆弧；子元素被横向压缩到原宽度的0.5倍，圆角水平半径同步缩为原来的一半，垂直半径却保持不变，就会变成扁椭圆，和父元素圆角出现明显视觉差。
单纯调高border-radius数值没有效果，是因为子元素高度只有20px，垂直方向圆角半径最大只能到10px——超过这个阈值时浏览器会自动等比缩小所有圆角半径，避免圆角溢出元素边界，垂直半径被卡死的前提下，水平半径也会按比例被限制，缩放后自然达不到预期效果。

• 通用优先方案：如果不需要依赖transform做高性能宽度动画，直接用width属性控制子元素宽度，替代scaleX缩放，圆角可以天然和父元素对齐：

.container {
  background-color: grey;
  height: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.item {
  background-color: red;
  height: inherit;
  width: 50%; /* 直接设置目标宽度，等价于scaleX(0.5)的视觉宽度 */
  border-radius: 20px;
}

• transform适配方案：如果必须使用scaleX（比如做宽度动画追求更流畅的渲染性能），可以提前把圆角的水平半径按缩放比放大，抵消缩放带来的变形。比如缩放比为0.5时，把水平圆角半径设为目标值的2倍，用border-radius双值语法单独控制水平、垂直半径即可：

.container {
  background-color: grey;
  height: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.item {
  background-color: red;
  transform-origin: 0 50%;
  transform: scaleX(0.5);
  height: inherit;
  /* 水平半径设为40px，经0.5倍缩放后视觉值为20px，垂直半径保持20px和父元素一致 */
  border-radius: 40px / 20px;
}

*注意：该方案仅适用于固定缩放比的场景，如果缩放比动态变化（比如进度条从0到1的动画），建议优先选择width控制方案，避免出现圆角动态错位问题。

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