css鼠标悬停后，边框动画

在CSS中，你可以使用`transition`和`:hover`伪类来创建鼠标悬停时的边框动画效果。这是一种动态地改变元素样式的方法，当鼠标指针悬停在元素上时，边框的颜色、宽度、形状或其他属性会按照你定义的动画时间和方式变化。

以下是一个简单的例子，展示如何实现边框颜色的渐变动画：

/* 原始样式 */
.box {
  border: 2px solid black;
  transition: border-color 0.5s ease; /* 定义过渡效果，持续0.5秒，缓动类型为ease */
}

/* 鼠标悬停时的样式 */
.box:hover {
  border-color: red; /* 边框颜色变为红色 */
}

在这个例子中，当鼠标悬停在`.box`元素上时，边框颜色会在0.5秒内平滑地从黑色渐变到红色。

如果你想创建更复杂的动画，比如边框宽度的变化，你可以这样写：

.box:hover {
  border-width: 4px; /* 边框宽度增大 */
}

或者同时改变两个方向：

.box:hover {
  border-width: 4px 2px; /* 上下宽度为4px，左右宽度为2px */
}

/* 或者使用百分比 */
.box:hover {
  border-width: 50% 10%;
}