通过调整 box-shadow 偏移值并启用全属性过渡，可实现悬停时按钮平移而背景阴影视觉位置不变的“错觉”。 通过调整 box-shadow 偏移值并启用全属性过渡，可实现悬停时按钮平移而背景阴影视觉位置不变的“错觉”。在 CSS 悬停动效设计中，一个常见需求是：按钮本身发生位移（如 transform: translate(-5px, -5px)），但其投射的阴影在页面上看起来“静止不动”——即用户感知到阴影始终锚定在原始位置，仿佛按钮从阴影上“抬升”而出。这并非真正固定阴影（CSS 中无绝对“固定阴影”属性），而是通过反向补偿阴影偏移达成视觉一致性。核心原理很简单：当按钮向左上移动 5px，若希望阴影在视口中的落点不变，则需将阴影的 x 和 y 偏移量各增加 5px（即从 6px 6px → 11px 11px），从而抵消按钮位移带来的视觉偏移。同时，必须将 transition 从仅作用于 transform 改为 all（或显式包含 box-shadow），否则阴影变化将无过渡效果，导致生硬跳变：.install { margin-left: 1rem; border-radius: 4px; padding: 10px; box-shadow: 6px 6px 0px rgba(51, 48, 47, 1.0); /* 初始阴影：右下6px */ width: 12rem; border: 1px solid #33302f; position: relative; transition: all 0.3s ease; /* ? 关键：启用所有可动画属性过渡 */}.install:hover { transform: translate(-5px, -5px); /* 按钮左上位移 */ box-shadow: 11px 11px 0px rgba(51, 48, 47, 1.0); /* 阴影同步右下+5px补偿 */}? 注意事项与最佳实践： Fotor AI Image Generator Fotor 平台的 AI 图片生成器