如何在Y轴缩放元素时保持border-radius全程恒定？

问题分析 #

当对元素进行Y轴scale(1,2)缩放时，同步调整border-radius（从8vmin改为8vmin/4vmin）虽然能让静态状态下圆角保持恒定，但过渡动画中两者的变化不同步，导致顶部圆角在动画过程中出现变形，视觉效果突兀。这是因为transform的缩放变换和border-radius的属性过渡是独立进行的，无法保证每一刻的圆角比例都匹配当前的缩放状态。

解决方案1：用高度变化替代scale变换 #

放弃使用transform: scaleY()，直接修改伪元素的高度，同时保持border-radius不变。这样圆角在整个过渡过程中都会保持恒定，因为没有缩放变换影响圆角的渲染。

修改后的CSS代码：

html { 
    height: 1000px;
}

.single-item {
    position: relative;
    margin: 0 auto;
    width: 40vw;
    height: 40vh;
    display: inline-block;
}

.single-item::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8vmin;
    background: linear-gradient(#000, #f90);
    content: '';
    transition: height 0.3s; /* 过渡高度而非transform */
}

.hover:hover::after {
    height: 200%; /* 直接将高度变为原来的2倍 */
}

解决方案2：使用CSS变量同步缩放比例与border-radius #

通过CSS变量动态计算当前的缩放比例，让border-radius的垂直值随缩放比例实时调整，确保每一刻的圆角都匹配当前的缩放状态。需要使用@property来让CSS变量支持过渡动画（部分现代浏览器支持）。

修改后的CSS代码：

/* 定义可过渡的CSS变量 */
@property --scale-y {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

html { 
    height: 1000px;
}

.single-item {
    position: relative;
    margin: 0 auto;
    width: 40vw;
    height: 40vh;
    display: inline-block;
}

.single-item::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8vmin / calc(8vmin / var(--scale-y));
    background: linear-gradient(#000, #f90);
    content: '';
    transition: --scale-y 0.3s;
    transform: scaleY(var(--scale-y));
    transform-origin: top;
}

.hover:hover::after {
    --scale-y: 2; /* 修改变量触发过渡 */
}

方案对比 #

• 方案1兼容性更好，所有支持CSS过渡的浏览器都能正常工作，动画过程中圆角完全恒定，适合大多数场景。
• 方案2保留了transform缩放的优势（不会影响布局流），但需要浏览器支持@property（Chrome 85+、Edge 85+、Firefox 113+），适合需要保持布局稳定的场景。

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