在网页交互里，链接的移入效果是最常见的视觉反馈之一。很多初学者习惯通过修改 border、padding 或者 width 来让鼠标悬停的链接“凸出来”，但这类写法会改变元素自身的盒模型尺寸，从而触发整个页面的重排，导致周围文字、图标被突然挤开。要避免这种干扰，核心思路是选用不参与正常文档流布局的属性来承担视觉效果。
为什么普通 hover 写法会影响其他元素
当一个链接默认没有边框，而在 :hover 时加上 border: 1px solid #333;，浏览器需要重新计算该元素的宽度和高度。由于块级或行内块元素尺寸变化，后续兄弟节点和父容器都要调整位置，这就是典型的重排（reflow）。在导航栏这种横向排列的场景中，用户把鼠标从第一个链接移到第二个，就会明显看到后面所有链接向右抖动。
类似的还有使用 padding 或 margin 扩张间距的做法。它们同样作用于布局盒子，改动即生效于文档流。如果项目里链接密集，比如页脚一排友情链接，任何一处 hover 放大都会让整体排版看起来不稳定，甚至引发滚动条闪烁。因此我们需要一类“只画出来、不占地方”的 CSS 能力。
使用 box-shadow 模拟移入效果
box-shadow 的投影区域完全在元素绘制阶段完成，不会增加元素的 border-box 尺寸，也不会挤走别人。我们可以给链接一个轻微的外发光或下沉阴影，在 hover 时改变阴影参数，实现“浮起”观感。
下面是一段可直接使用的样式。我们把 transition 加在 a 标签上，让阴影变化平滑；hover 时加深阴影并略微位移，模拟按钮被按亮的效果。注意代码中所有小于号都做了转义，以防被解析为标签。
a.link-demo {
display: inline-block;
padding: 6px 12px;
color: #2c3e50;
text-decoration: none;
border-radius: 4px;
transition: box-shadow 0.2s ease, color 0.2s ease;
}
a.link-demo:hover {
color: #ffffff;
background-color: #3498db;
/* 向外投影，不占布局空间 */
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.5);
}
这种写法的优点是零重排、性能好，甚至在低端设备也流畅。缺点是如果父容器设置了 overflow: hidden，阴影会被裁掉，此时需要给容器留足内边距或改用其他方案。
使用 transform 做缩放而不影响布局
transform: scale() 同样是在合成层处理，元素视觉上变大，但它在文档流中的占位大小一分不动。这对图标型链接尤其有用：鼠标移入时图标微微放大，旁边文字纹丝不动。
示例里我们用 transform: scale(1.08) 配合 transition，并用 transform-origin: center 保证从中心扩张。为避免动画期间被相邻元素遮挡，可加 position: relative; z-index: 1; 提升层叠顺序，但这不属于布局占位变化。
a.icon-link {
display: inline-block;
transition: transform 0.15s ease;
position: relative;
z-index: 0;
}
a.icon-link:hover {
transform: scale(1.08);
z-index: 1;
}
需要提醒的是，频繁使用 transform 动画时，可以加上 will-change: transform; 让浏览器提前创建合成层，减少主线程负担。但若页面有上百个链接都写 will-change，反而会消耗更多内存，应按实际需求局部使用。
对比与选型建议
我们把两种方案放在一张表里看差异：
| 方案 | 是否触发重排 | 适用场景 | 注意事项 |
|---|---|---|---|
| box-shadow | 否 | 需要发光、浮起感的文字或按钮链接 | 父级 overflow 隐藏会裁切阴影 |
| transform scale | 否 | 图标、头像类链接的轻微放大 | 过度缩放易模糊，需控制比例 |
如果希望链接在 hover 时既有背景色变化又有立体感，推荐 box-shadow 优先；若是纯图形链接，transform 更轻量。两者都能完美达成“不影响其他元素”的目标，你可以按视觉规范自由组合。
完整页面示例
下面给出一个最小可运行页面，把上述技巧合在一起，方便你直接复制到本地试效果。其中 HTML 标签名在代码外提及已转义，代码块内尖括号也全部转义。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>链接移入效果演示</title>
<style>
body { font-family: system-ui, sans-serif; padding: 40px; }
.nav a {
display: inline-block;
margin-right: 16px;
padding: 8px 14px;
color: #333;
text-decoration: none;
border-radius: 6px;
transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.nav a:hover {
background-color: #3498db;
color: #fff;
box-shadow: 0 4px 10px rgba(52,152,219,0.45);
}
.icon-row a {
display: inline-block;
margin-right: 10px;
transition: transform 0.15s ease;
}
.icon-row a:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<nav class="nav">
<a href="https://ipipp.com">首页</a>
<a href="https://ipipp.com">文档</a>
<a href="https://ipipp.com">关于</a>
</nav>
<div class="icon-row" style="margin-top:30px;">
<a href="https://ipipp.com">🔗</a>
<a href="https://ipipp.com">⚙️</a>
</div>
</body>
</html>
通过这个例子可以看到，无论怎么移动鼠标，导航文字和图标之间的相对位置始终固定，彻底解决了传统 hover 撑开布局的烦恼。掌握 box-shadow 与 transform 的视觉独立性，是写出安稳交互的基础功。
CSS链接移入效果box-shadow修改时间：2026-08-06 17:51:36