CSS unhover属性问题：圆形边框hover转方形动画无法实现

别发愁啦，这个效果用CSS的过渡动画就能轻松搞定！核心思路就是给元素设置初始圆形边框，hover时切换为方形，再通过过渡属性让形状变化平滑过渡，鼠标移出时浏览器会自动反向恢复圆形，完全不用额外写unhover的逻辑~

下面是完整的可运行示例：

HTML结构 #

<div class="shape-box"></div>

CSS样式 #

.shape-box {
  width: 200px;
  height: 200px;
  border: 4px solid #2c3e50;
  /* 初始圆形边框（宽高相等时50%即可实现完美圆形） */
  border-radius: 50%;
  /* 添加上过渡动画，让形状变化更丝滑 */
  transition: border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 50px auto;
}

.shape-box:hover {
  /* hover时切换为方形边框 */
  border-radius: 0;
}

关键细节说明 #

• 如果你的元素不是正方形，想要保持初始圆形的话，把border-radius设置为元素最大边长的一半就行（比如宽300px高200px，初始值设为150px）。
• 调整transition里的时长（比如把0.3s改成0.5s）可以控制动画的快慢，换不同的缓动函数（比如ease-in-out）能改变动画的节奏。

内容的提问来源于stack exchange，提问作者Mattia Marziali