CSS过渡不适用于将boder-radius属性悬停

Question

我有一些嵌套的div，而server { listen 80; server_name abc.com; return 301 https://$server_name$request_uri; } server { listen 443; ssl on; ssl_certificate /etc/nginx/conf.d/bundle.crt; ssl_certificate_key /etc/nginx/conf.d/certificate.key; server_name abc.com; proxy_connect_timeout 360; proxy_send_timeout 360; proxy_read_timeout 360; send_timeout 360; location / { proxy_pass http://192.168.1.10:9999; } } 在悬停2个div时没有变化。对于其他2个，它正在更改（未更改的div在屏幕快照中标记为1和2）。

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

请全屏运行代码段

border-radius

.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%;
}

Answer 1

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

.class:hover->有效。
.class :hover->不起作用。

此处

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

.dv-br-rd-outer :hover {
    border-radius: 60% 10% 60% 80% / 65% 40% 60% 40%;
}

---

关于您的投资组合

我可以告诉您您可能是在自学，我可以向您指出一些可以改进的地方。

• 您永远不要在html中使用属性样式。
  将css代码保存在.css文件中，并将html保存在.html文件中。
  
  

• 不要过度使用类名称，而应使用提供给您的内容来选择带有CSS的项目。
  通过 :nth-child() 选择器使用项目的父ID。详细了解here。
  例如：#parent_id:nth-child(1) { css rules } < br />
  

• 这是一个主观的方法，但是请尝试为您的类命名，以便任何读取您的代码的人都一眼就能知道是什么。
  
  

• 不要对要输出的每个文本使用div。
  

代替此：

<div class="dv-text-head">
    <h1>Jamie Vardy</h1>
    <div>
        Web developer | Leicester City fan
    </div>
</div>

执行以下操作：

<div class="dv-text-head">
    <h1>Jamie Vardy</h1>
    <p> Web developer | Leicester City fan </p>
</div>

<p>代表段落，而<div>则更多地包含DOM的某些元素。