通过设置初始透明边框并结合transition与:hover，可实现按钮边框宽度平滑扩展的动画效果，提升交互视觉体验。

在CSS中，可以通过 transition 结合 border-width 实现按钮边框的动态动画效果，比如鼠标悬停时边框逐渐变宽或从无到有地“浮现”。这种效果能提升交互体验，让按钮更具视觉吸引力。

基础结构：设置按钮样式

首先创建一个简单的按钮元素，并为其添加基本样式和初始边框状态。可以使用 div 或 button 标签。

示例HTML：

<button class="animated-border-btn">悬停我</button>

基础CSS：

.animated-border-btn {
  padding: 12px 24px;
  font-size: 16px;
  color: #333;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: border-width 0.3s ease;
}

这里将 border 初始设为透明且固定宽度（如2px），确保布局稳定。关键在于使用 transition 来控制 border-width 的变化过程。

:hover 状态下改变 border-width

当用户将鼠标移到按钮上时，通过 :hover 伪类增加边框宽度，配合过渡实现动画。

立即学习“前端免费学习笔记（深入）”；

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

.animated-border-btn:hover {
  border-width: 6px;
}

此时，由于设置了 transition: border-width 0.3s ease，边框会平滑地从2px扩展到6px，产生“膨胀”感。

进阶技巧：配合其他属性增强视觉效果

仅改变边框宽度可能不够明显，可结合颜色、阴影等属性，使动画更生动。

• 同时过渡 border-color，让边框在变宽时也变色
• 添加 box-shadow 模拟发光效果
• 使用 padding 微调内容位置，避免跳动

增强版CSS：

.animated-border-btn {
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-width 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.animated-border-btn:hover {
  border-width: 6px;
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}

这样，边框不仅变宽，还呈现出蓝色并带有微光，整体更具动感。

注意事项与兼容性

border-width 支持 transition，但需注意以下几点：

• 初始状态不能是 none，应使用 transparent 颜色配合具体宽度（如0或2px）
• 避免在 transition 中使用 all，建议明确指定属性以提升性能
• 在低版本浏览器中测试，确保动画平滑

基本上就这些。只要合理设置起始和结束状态，并启用过渡，就能轻松做出流畅的边框动画。不复杂但容易忽略细节。