核心是用负y-offset（如-4px）配合增大blur-radius和降低alpha值模拟抬升，而非正向偏移；需设transition、容器display为block/inline-block，避免transform干扰布局，移动端改用:focus-within替代:hover。
用 box-shadow 实现悬停浮动投影的核心写法
浮动投影本质是让图标“看起来抬升”，靠的是阴影的偏移 + 模糊 + 颜色渐变。关键不是加阴影，而是控制 box-shadow 的 y-offset（垂直偏移）为负值，并配合模糊半径和透明度营造上浮感。
常见错误是只加正向 y-offset（比如 box-shadow: 0 4px 8px rgba(0,0,0,0.2)），这会让阴影在下方拉长，反而显得图标“下沉”或“被压住”。真正要模拟抬升，得让阴影集中在图标**正下方偏上一点的位置**——也就是用负的 y-offset，再靠模糊扩散出自然过渡。
- 基础写法：
box-shadow: 0 -4px 12px -2px rgba(0,0,0,0.15)（-4px抬升感，-2px的spread-radius收紧阴影范围，避免虚胖） - 图标必须有明确的容器（如
<span>或<i>），且该元素需设置display: inline-block或block，否则box-shadow可能不生效或尺寸异常 - 推荐搭配
transition: box-shadow 0.2s ease，否则悬停时阴影会突兀跳变
图标本身需要 transform: translateY() 吗？
不需要额外加 transform。纯靠 box-shadow 的负偏移就能达成视觉浮动效果；加 transform: translateY(-2px) 反而容易破坏布局流，尤其在行内文本中会导致基线错位、换行异常或父容器高度抖动。
如果你看到别人用了 transform，大概率是为了强化“上浮”错觉，但这是过设计。实际项目中，仅调优 box-shadow 参数更轻量、更稳定。
立即学习“前端免费学习笔记（深入）”；
- 只用
box-shadow：安全、不影响文档流、兼容性好（IE10+） - 混用
transform：需同步调整margin或vertical-align来补偿位移，维护成本高 - 若图标是 SVG 内联，注意其默认
vertical-align: baseline，悬停时即使没 transform 也可能因阴影渲染导致轻微跳动，此时加vertical-align: middle更稳妥
移动端悬停失效？用 :focus-within 或伪类替代
CSS 的 :hover 在触摸设备上不可靠——没有“悬停”概念，首次点击可能触发，第二次就失效。不能依赖它做核心交互反馈。
解决思路不是硬加 JS，而是改用可触发的状态：对图标容器添加 tabindex="0"，然后用 :focus-within 捕获焦点态，或直接监听图标父元素的 :focus。这样既保持纯 CSS，又覆盖触屏和键盘用户。
- HTML 示例：
<span class="icon-wrapper" tabindex="0"><i class="icon-home"></i></span> - CSS 示例：
.icon-wrapper:focus-within .icon-home { box-shadow: 0 -6px 16px -4px rgba(0,0,0,0.2); } - 别忘了加
outline: none（或自定义 focus outline）避免浏览器默认焦框干扰视觉
阴影颜色和透明度怎么选才不显脏？
投影不是越黑越“立体”，而是越接近环境光色越自然。深色背景上用浅灰（如 rgba(255,255,255,0.1)），浅色背景用带暖灰倾向的暗色（如 rgba(0,0,0,0.08)），比纯黑 rgba(0,0,0,0.2) 更通透。
常见翻车点：在白色背景上用 rgba(0,0,0,0.3)，阴影边缘生硬、像贴了块黑补丁；或在深灰背景上用高透明白阴影，直接看不见。
- 快速试配法：先设
rgba(0,0,0,0.08)，观察是否太淡；再微调到0.12～0.15，一般足够 - 避免用
hsl()或hex直接写阴影色，rgba()的 alpha 控制更直观 - 如果图标本身带描边或背景色，阴影的
blur值建议不超过12px，否则会晕开、失焦
