如何实现CSS鼠标悬停时元素边框向两侧淡出的动画效果？

你的核心需求是让边框在悬停时从中间向两侧逐渐消失（而非整体淡出），直接修改border-width或border-color无法实现这种方向型过渡效果——因为边框是整体属性，CSS无法单独控制其局部显示状态。下面提供两种可行的实现思路：

方法一：伪元素模拟边框+缩放变换 #

通过伪元素模拟边框，利用transform: scaleX(0)配合transform-origin实现从中心向两侧收缩消失的效果：

.button-bubble {
  position: relative;
  padding: 8px 16px; /* 预留伪元素边框空间，避免布局跳动 */
  background: #你的元素背景色;
  border-radius: 1000pt; /* 继承你的圆角设置 */
}

/* 伪元素模拟初始边框 */
.button-bubble::before {
  content: '';
  position: absolute;
  inset: 0; /* 等价于top/left/right/bottom:0 */
  border: 2px solid white;
  border-radius: inherit;
  transition: transform 250ms ease 50ms; /* 包含50ms延迟 */
  transform-origin: center; /* 以中心为原点向两侧缩放 */
}

/* 悬停时触发收缩动画 */
.button-bubble:hover::before {
  transform: scaleX(0); /* X轴缩至0，实现左右向中间收缩消失 */
  /* 若需上下方向收缩，替换为scaleY(0)即可 */
}

方法二：渐变背景模拟边框+背景尺寸动画 #

如果需要更细腻的淡出边缘效果，可以用线性渐变模拟边框，通过调整背景尺寸实现收缩：

.button-bubble {
  position: relative;
  padding: 8px 16px;
  /* 用四个渐变分别模拟上下左右边框，中间实色、两侧透明 */
  background: 
    linear-gradient(to right, transparent, white 20%, white 80%, transparent) left top / 100% 2px,
    linear-gradient(to right, transparent, white 20%, white 80%, transparent) left bottom / 100% 2px,
    linear-gradient(to bottom, transparent, white 20%, white 80%, transparent) left top / 2px 100%,
    linear-gradient(to bottom, transparent, white 20%, white 80%, transparent) right top / 2px 100%;
  background-repeat: no-repeat;
  border-radius: 1000pt;
  transition: background-size 250ms ease 50ms;
}

.button-bubble:hover {
  /* 让四个方向的背景尺寸缩至0，实现两侧淡出收缩 */
  background-size: 0 2px, 0 2px, 2px 0, 2px 0;
}

你可以调整渐变中的百分比（如20%、80%），控制淡出边缘的长度，优化过渡自然度。

原代码无效的原因 #

你直接修改border: 0 solid white，只会让边框整体从有到无，无法控制消失方向——border是整体属性，CSS无法单独操控其局部显示状态，必须通过伪元素或背景渐变这类可拆分控制的元素模拟边框，才能实现方向型过渡动画。

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