CSS Border和BorderRadius的一次踩坑之旅

使用border和border-radius实现hover状态下的border动画效果，当两者同时使用时就才生了奇妙的化学反应。

前言：

公司要求实现一个卡片效果，初始时border为2px，圆角为10px，实线，边框颜色为#6666，当用户移入卡片时，在hover状态下隐藏处border-top外的所有边框，并且顶部边框宽度变更为4px颜色变为red，卡片添加一个阴影效果，听起来是不是很简单，只需要改变一下边框颜色和大小就可以了，如果你也这么想那就完了，先说结论，不能直接修改边框的大小，直接改变边框的大小会造成内部元素的抖动，尤其是设置了动画过渡效果，第二会导致顶部边框线条两端延申衔接不自然。

卡片实现：

先实现卡片的基本效果，这里为了效果明显我将2px都*2了。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1</title>
  </head>
  <body>
    <div class="box"></div>
    <div class="text">11111</div>
  </body>
</html>

<style>
.box {
	width: 202px;
	height: 411px;
	border-radius: 10px;
	margin: 100px auto 10px;
	border: 4px solid #00eef7;
  background: olivedrab;
  transition: .6s;
}

.box:hover {
  border-color: transparent;
	border-top: 8px solid red;
}

.text {
  color: #000;
  margin: 0 auto;
  font-size: 80px;
  width: fit-content;
}
</style>

这是在页面中的效果，第一张图是初始效果，第二张是hover下的效果在图二中紫色圆圈所示区域明显可见圆角处延申衔接不自然，并且在变化过程中下面的1111也发生了抖动，图三为移入的hover效果是一张GIF动图。

解决过程和原因：

最初以为是圆角的问题导致的border-top两端衔接不自然，一顿折腾后仍然没解决，使用AI工具一顿折腾后，仍然没有解决衍生不自然的问题，第二天经过一顿实验，发现衍生不自然的问题是因为存在左侧边框和右侧边框造成的，如果只存在顶部边框就会完美延申到圆角处，如果一开始只设置顶部边框就可以完美解决内容抖动和延申不自然的问题，现在剩下一个问题，那就是初始的边框是四边都有的，这里通过阴影box-shadow来模拟就可以完美解决了，最终效果和代码请看下面。

最终效果：

修改后的代码：


<style>
  body {
    background: #000;
  }
.box {
	width: 202px;
	height: 411px;
	border-radius: 10px;
	margin: 100px auto 10px;
  /* 设置初始顶部边框为4px，透明色 */
	border-top: 8px solid transparent;
  /* 设置阴影，模拟初始边框  */
  box-shadow: 0 0 4px 1.5px #00eef7;
  background: olivedrab;
  transition: .6s;
}

.box:hover {
	border-top-color: red;
  box-shadow: 2px 4px 11px 0px #BABABA1A,8px 18px 20px 0px #BABABA17,18px 40px 27px 0px #BABABA0D,33px 72px 31px 0px #BABABA03,51px 112px 34px 0px #BABABA00;
}

.text {
  color: #fff;
  margin: 0 auto;
  font-size: 80px;
  width: fit-content;
}
</style>

结尾：

到这就结束了，如您有好的解决办法或其它问题，欢迎您在下方评论区留言讨论。