html - CSS过渡无法正常工作

我真的需要一些帮助在我的css代码。
我正试图使用<h1>属性使我的transition更改颜色和形状。
我希望当我悬停在标题上时，形状和颜色能慢慢改变，
但目前只有颜色受到影响，形状独立改变。
我的代码如下：
html格式：

<h1 class="box">Abcdefg</h1>

css:

.box {
      background: #2db34a;
      margin: 1px auto;
      transition: background 1s linear;
      border-radius: 0.3%;
      color: white;
      cursor: pointer;
      height: 95px;
      line-height: 95px;
      text-align: center;
      width: 400px;
    }

.box:hover {
      background: #ff7b29;
   border-radius: 50%;
}

谢谢。

最佳答案

您只需将border-radius添加到您的transition

.box {
  background: #2db34a;
  margin: 1px auto;
  transition: background 1s linear, border-radius 1s linear;
  border-radius: 0.3%;
  color: white;
  cursor: pointer;
  height: 95px;
  line-height: 95px;
  text-align: center;
  width: 400px;
}

.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

<h1 class="box">Abcdefg</h1>

关于html - CSS过渡无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45337699/