CSS过渡无法在Boder-radius属性的悬停中工作

Question

我有一些嵌套的div，并且border-radius在悬停2个div时没有变化。对于其他2个，它正在更改（未更改的div在屏幕快照中标记为1和2）。

）”

有人可以指出我做错了什么吗？另外，请告诉我们对于网站开发者来说，这是否可以构成一个有效（但最少）的投资组合网站。

请全屏运行代码段

.f-container {
  width: 100%;
}

.dv-br-rd-outer {
  width: 30em;
  height: 30em;
  background-color: #47ffd4;
  border-radius: 50% 10% 10% 80% / 95% 40% 70% 70%;
  margin: 0 auto;
  transition: all 1200ms;
}

.dv-br-rd-in-one {
  width: 95%;
  height: 95%;
  background-color: springgreen;
  border-radius: 80% 15% 10% 70% / 60% 60% 65% 20%;
  ;
  margin: 0 auto;
  transition: all 3000ms;
}

.dv-br-rd-in-two {
  width: 95%;
  height: 95%;
  background-color: dodgerblue;
  border-radius: 60% 10% 60% 80% / 65% 40% 60% 40%;
  margin: 0 auto;
  transition: all 800ms;
}

.dv-br-rd-in-three {
  width: 95%;
  height: 95%;
  border-radius: 5% 30% 30% 70% / 60% 60% 60% 50%;
  background-color: #ffc107;
  margin: 0 auto;
  transition: all 1500ms;
}

.dv-text-head {
  padding: 30%;
}

.dv-text-head h1 {
  font-weight: normal;
  color: white;
}

.dv-br-rd-in-two:hover {
  border-radius: 5% 10% 60% 80% / 60% 40% 60% 40%;
}

.dv-br-rd-in-one :hover {
  border-radius: 52% 10% 150% 70% / 9% 4% 75% 70%;
}

.dv-br-rd-in-three:hover {
  border-radius: 50% 15% 30% 20% / 60% 10% 60% 80%;
}

.dv-br-rd-outer :hover {
  border-radius: 60% 10% 60% 80% / 65% 40% 60% 40%;
}
<div class="f-container">
  <div class="dv-br-rd-outer">
    <div class="dv-br-rd-in-one">
      <div class="dv-br-rd-in-two">
        <div class="dv-br-rd-in-three">
          <div class="dv-text-head">
            <h1>Jamie Vardy</h1>
            <div>
              Web developer | Leicester City fan
            </div>
          </div>
        </div>
      </div>
    </div>


    <div style="text-align: center;margin-top: 50px;">
      <div style="width: 55%; text-align: left; margin:0 auto;">
        <div style="color: #795548;">tools/frameworks I know</div>
        Angular 8 | Javascript | CSS | HTML
      </div>
      <div style="width: 55%; text-align: left; margin:0 auto; color: #795548; margin-top:10px;">
        <div>github </div>
        <div>download resume </div>
      </div>
    </div>
  </div>
</div>

我有一些嵌套的div，并且悬停2个div时，border-radius都没有改变。对于其他2个，它正在更改（未更改的div在屏幕快照中标记为1和2）。 ＆...

Answer 1

您的错误是您在:hover上声明了一些CSS规则，但其中两个有错字。