如何平稳地从一个属性值过渡到另一个

Question

img {
border-radius: 50%;
}
img:hover {
border-radius: 20%;
}

这是我当前的代码，当前的问题是，当悬停时边界半径从50%跳到20%时，它看起来不平滑。我希望它更平滑，比如50%到49%到48%到47%，一直到20%。

Answer 1

查找转换属性你的问题标题中甚至有关键词；(

img {
border-radius: 50%;
transition: border-radius 1s; /* HERE! */
}
img:hover {
border-radius: 20%;
}

<img src="https://via.placeholder.com/100">