css中border无法真正虚化，因无border-blur属性；所谓“虚化”实为阴影弱化、透明度渐变或伪元素遮罩的视觉错觉，直接transition border-width会触发重排卡顿，border-color仅变色不模糊，而box-shadow分层叠加或伪元素+clip-path+filter才是可行方案。
button:hover 时边框不能直接“虚化”，CSS 没有 border-blur 或类似属性；所谓“虚化”实际是视觉错觉，靠的是阴影弱化、透明度渐变或伪元素遮罩实现。
为什么直接 transition border-color 或 border-width 不行
border-width 动画会触发 layout（重排），导致卡顿甚至跳动；border-color 虽可过渡，但纯颜色变化 ≠ 虚化感——它只是换色，边缘依然锐利。更关键的是，border 本身是硬边几何线，没有模糊通道。
- 改
border-width：浏览器必须反复计算盒模型，移动端尤其明显掉帧 - 用
filter: blur()作用于整个 button：会模糊文字和背景，不可控 - 依赖
box-shadow单独模拟“软边”：需配合rgba()低透明度 + 小 spread，否则像发光而非虚化
用 box-shadow 模拟软边悬停的实操写法
真正可用、轻量、无重排的方案是分层叠加两层 box-shadow：一层紧贴边框的微透明描边（保持轮廓感），一层轻微扩散的柔光（制造虚化错觉）。
button {
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
button:hover {
border-color: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
- 默认状态的
box-shadow: 0 0 0 1px是为了给后续 hover 留出动画起点——没它，首次 hover 会闪一下 - hover 中第二层
0 1px 3px的模糊半径不能超过 4px，否则像浮起而非虚化 - 两层 shadow 的 alpha 值差建议控制在 0.04–0.06，太大会显脏，太小看不出变化
需要真·边缘柔化时，用伪元素 + clip-path
当设计稿明确要求“毛玻璃边”或“雾化边缘”，就得放弃 border，改用 ::before 绘制一层带 filter: blur(0.5px) 的覆盖层，并用 clip-path 切出按钮形状——这是目前唯一能逼近 Photoshop 高斯模糊边的效果。
button {
position: relative;
border: none;
}
button::before {
content: '';
position: absolute;
top: -1px; left: -1px; right: -1px; bottom: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
filter: blur(0.4px);
clip-path: inset(0);
z-index: -1;
}
button:hover::before {
border-color: rgba(0, 0, 0, 0.4);
filter: blur(0.6px);
}
-
clip-path: inset(0)是关键，它让伪元素严格贴合 button 内容区，不溢出也不缩进 -
filter: blur()值超过 0.8px 在多数屏幕会糊成一片，0.4–0.6 是安全区间 - 必须设
z-index: -1，否则伪元素会盖住文字，且 hover 时文字无法响应 pointer-events
真正难的不是写出模糊效果，而是控制它只在 hover 时出现、不干扰焦点状态、在 Safari 里不闪烁、在 Windows 高 DPI 屏上不发虚——这些细节比代码本身更耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
