我試圖在Y軸上縮放一個元素。該元素的邊框半徑為20px。我正在跟隨這個教程學習如何縮放一個元素，同時保持它的邊界半徑不變。TLDR的意思是，要使邊界在縮放后保持不變，還必須縮放邊界半徑。如果您在沒有動畫過渡的情況下縮放它，這是可行的，如上面提供的文章所示。然而，當制作動畫時，邊界半徑在過渡期間看起來很糟糕。

下面是一個例子。以下示例中的右側元素在垂直方向上縮放了2倍，同時邊框半徑也進行了縮放。你可以看到頂部的邊界半徑在動畫中并沒有保持不變，在我看來很不協調。我想知道是否有一種方法可以使邊界半徑在整個轉換過程中保持不變。

https://codepen.io/KR1S71AN/pen/qBQbgYR

這里有一個這樣的例子。

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: transform 0.3s;
    transform-origin: top;
}

.hover:hover::after {
  border-radius: 8vmin/ 4vmin;
    transform: scale(1, 2)
}

<section>
    <div class='single-item'></div>
    <div class='single-item hover'></div>
</section>

而不是變換，這實際上拉伸你的元素，只是改變高度。

html {
  height: 1000px;
}

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

.single-item::after {
  position: absolute;
  border-radius: 8vmin;
  background: linear-gradient(#000, #f90);
  content: '';
  width: 100%;
  height: 100%;
  transition: height 0.3s;
}

.hover:hover::after {
  height: 200%;
}

<section>
  <div class='single-item'></div>
  <div class='single-item hover'></div>
</section>