Tailwind CSS 阴影

Tailwind CSS 阴影学习笔记（详细版）

一、阴影基础（Box Shadow）

Tailwind 使用shadow-{size}类设置box-shadow，默认提供 7 种预设阴影，从极淡到极深。

1.1 预设阴影尺寸

1.2 使用示例

<!-- 基础卡片 --><divclass="bg-white rounded-lg shadow-md p-6">中等阴影卡片</div><!-- 悬浮按钮 --><buttonclass="bg-blue-500 text-white px-4 py-2 rounded shadow hover:shadow-lg transition-shadow">悬停加深</button><!-- 模态框 --><divclass="fixed inset-0 bg-black/50 flex items-center justify-center"><divclass="bg-white rounded-xl shadow-2xl p-8 max-w-md">模态框内容</div></div><!-- 凹陷效果 --><divclass="bg-gray-100 rounded shadow-inner p-4">凹陷区域</div>

二、阴影颜色（Shadow Color）

Tailwind v3.0+ 支持自定义阴影颜色，通过shadow-{color}类实现（需配置或任意值）。

2.1 基础用法（任意值）

<!-- 蓝色阴影 --><divclass="shadow-[0_4px_14px_0_rgba(59,130,246,0.39)]">蓝色发光阴影</div><!-- 红色警告阴影 --><divclass="shadow-[0_0_15px_rgba(239,68,68,0.5)]">红色发光</div>

2.2 自定义配置（推荐）

在tailwind.config.js中扩展：

module.exports={theme:{extend:{boxShadow:{'blue':'0 4px 14px 0 rgba(59, 130, 246, 0.39)','red':'0 0 15px rgba(239, 68, 68, 0.5)','green':'0 4px 14px 0 rgba(16, 185, 129, 0.39)',}}}}

<divclass="shadow-blue">蓝色阴影卡片</div><divclass="shadow-red">红色警告卡片</div>

2.3 暗色模式阴影

<divclass="shadow-md dark:shadow-lg dark:shadow-black/30">暗色模式加深阴影</div>

三、阴影状态变体

阴影可与所有状态修饰符组合，实现动态交互效果。

3.1 悬停阴影

<!-- 悬停加深 --><divclass="shadow-md hover:shadow-lg transition-shadow duration-300">悬停浮起</div><!-- 悬停发光 --><divclass="shadow-md hover:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all">悬停发光</div>

3.2 聚焦阴影

<inputclass="border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:shadow-lg"/>

3.3 激活阴影

<buttonclass="bg-blue-500 text-white px-6 py-2 rounded shadow-md active:shadow-sm active:translate-y-0.5 transition-all">按下凹陷</button>

3.4 禁用阴影

<buttonclass="shadow-md disabled:shadow-none disabled:opacity-50"disabled>禁用态无阴影</button>

四、响应式阴影

<!-- 移动端无阴影，桌面端有阴影 --><divclass="shadow-none md:shadow-md lg:shadow-lg">响应式阴影</div><!-- 不同屏幕尺寸不同阴影 --><divclass="shadow-sm sm:shadow-md md:shadow-lg xl:shadow-xl">渐进式阴影</div>

五、阴影实战模式

5.1 卡片层级系统

<!-- 基础卡片 --><divclass="bg-white rounded-lg shadow p-4">基础</div><!-- 悬浮卡片 --><divclass="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-4">悬浮</div><!-- 深度浮起 --><divclass="bg-white rounded-xl shadow-xl p-6">深度浮起</div><!-- 模态框 --><divclass="fixed inset-0 bg-black/60 flex items-center justify-center"><divclass="bg-white rounded-2xl shadow-2xl p-8 max-w-lg">模态框</div></div>

5.2 下拉菜单

<divclass="relative"><buttonclass="px-4 py-2 bg-white border rounded shadow-sm">下拉菜单</button><divclass="absolute top-full left-0 mt-1 w-48 bg-white rounded shadow-lg py-2 z-50"><aclass="block px-4 py-2 hover:bg-gray-100">选项一</a><aclass="block px-4 py-2 hover:bg-gray-100">选项二</a></div></div>

5.3 按钮交互

<!-- 浮起按钮 --><buttonclass="bg-blue-500 text-white px-6 py-3 rounded-lg shadow-md hover:shadow-lg hover:-translate-y-0.5 active:shadow-sm active:translate-y-0 transition-all duration-200">浮起按钮</button><!-- 发光按钮 --><buttonclass="bg-purple-500 text-white px-6 py-3 rounded-full shadow-lg hover:shadow-[0_0_25px_rgba(168,85,247,0.6)] transition-shadow">发光按钮</button><!-- 凹陷按钮 --><buttonclass="bg-gray-200 text-gray-700 px-6 py-3 rounded shadow-inner hover:shadow-md hover:-translate-y-0.5 transition-all">凹陷按钮</button>

5.4 图片/媒体展示

<!-- 图片悬停浮起 --><divclass="group relative overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow"><imgsrc="cover.jpg"class="w-full h-64 object-cover group-hover:scale-105 transition-transform"/><divclass="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"><spanclass="text-white">查看详情</span></div></div><!-- 视频卡片 --><divclass="bg-white rounded-xl shadow-lg overflow-hidden"><divclass="aspect-video bg-gray-200"><imgsrc="thumbnail.jpg"class="w-full h-full object-cover"/></div><divclass="p-4"><h3class="font-semibold">视频标题</h3></div></div>

5.5 表单元素

<!-- 输入框聚焦阴影 --><inputclass="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:shadow-lg transition-shadow"/><!-- 搜索框 --><divclass="relative"><inputclass="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-full shadow-sm focus:outline-none focus:shadow-lg focus:ring-2 focus:ring-blue-500 transition-shadow"placeholder="搜索..."/><svgclass="absolute left-3 top-2.5 w-5 h-5 text-gray-400">...</svg></div>

5.6 导航栏

<!-- 固定导航栏 --><navclass="fixed top-0 left-0 right-0 bg-white shadow-md z-50"><divclass="max-w-7xl mx-auto px-4 py-3 flex justify-between"><spanclass="font-bold">Logo</span><divclass="space-x-4"><aclass="hover:text-blue-500">首页</a><aclass="hover:text-blue-500">关于</a></div></div></nav><!-- 滚动时阴影变化（需 JS 控制类） --><navclass="bg-white transition-shadow"id="navbar"><!-- 内容 --></nav><script>window.addEventListener('scroll',()=>{constnav=document.getElementById('navbar');if(window.scrollY>10){nav.classList.add('shadow-md');}else{nav.classList.remove('shadow-md');}});</script>

5.7 悬浮提示（Tooltip）

<divclass="relative group"><buttonclass="px-4 py-2 bg-blue-500 text-white rounded">悬停查看提示</button><divclass="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-sm rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">这是提示信息<divclass="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div></div></div>

5.8 暗色模式阴影

<divclass="bg-white dark:bg-gray-800 shadow-md dark:shadow-black/40 rounded-lg p-6"><h3class="text-gray-900 dark:text-white">暗色模式卡片</h3><pclass="mt-2 text-gray-600 dark:text-gray-300">暗色模式下使用更深的阴影增强层次感</p></div>

5.9 玻璃拟态 + 阴影

<divclass="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl shadow-xl p-6"><h3class="text-white font-semibold">玻璃拟态卡片</h3><pclass="text-white/80 mt-2">配合阴影增强立体感</p></div>

5.10 骨架屏加载

<divclass="animate-pulse"><divclass="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-sm h-48"></div><divclass="mt-4 space-y-2"><divclass="bg-gray-200 dark:bg-gray-700 rounded h-4 w-3/4"></div><divclass="bg-gray-200 dark:bg-gray-700 rounded h-4 w-1/2"></div></div></div>

六、自定义阴影配置

6.1 完全覆盖默认阴影

// tailwind.config.jsmodule.exports={theme:{boxShadow:{'sm':'0 1px 2px 0 rgba(0, 0, 0, 0.05)','DEFAULT':'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)','md':'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)','lg':'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)','xl':'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)','2xl':'0 25px 50px -12px rgba(0, 0, 0, 0.25)','inner':'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)','none':'none',}}}

6.2 扩展自定义阴影

module.exports={theme:{extend:{boxShadow:{'glow':'0 0 20px rgba(59, 130, 246, 0.5)','glow-lg':'0 0 40px rgba(59, 130, 246, 0.7)','card':'0 2px 8px rgba(0, 0, 0, 0.08)','card-hover':'0 8px 24px rgba(0, 0, 0, 0.12)',}}}}

<divclass="shadow-glow">蓝色发光</div><divclass="shadow-card hover:shadow-card-hover transition-shadow">卡片</div>

6.3 任意值阴影

<!-- 自定义多层阴影 --><divclass="shadow-[0_4px_14px_0_rgba(59,130,246,0.39),0_10px_20px_rgba(0,0,0,0.1)]">多层阴影</div><!-- 自定义内阴影 --><divclass="shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)]">自定义内阴影</div>

七、阴影设计原则

7.1 层级系统

7.2 交互反馈

• 悬停：hover:shadow-lg（浮起感）
• 按下：active:shadow-sm（凹陷感）
• 聚焦：focus:shadow-lg+focus:ring（可访问性）
• 禁用：disabled:shadow-none（弱化）

7.3 暗色模式策略

• 亮色模式：使用rgba(0,0,0,0.1)等浅色阴影
• 暗色模式：使用rgba(0,0,0,0.3)或rgba(255,255,255,0.1)增强对比
• 避免过深阴影导致视觉疲劳

7.4 性能优化

• 避免过多复杂阴影（尤其是shadow-2xl）
• 使用transition-shadow而非transition-all提升性能
• 移动端慎用大阴影（可能影响性能）

八、阴影与圆角配合

<!-- 小圆角 + 淡阴影 --><divclass="rounded-lg shadow-md">小圆角卡片</div><!-- 大圆角 + 大阴影 --><divclass="rounded-2xl shadow-xl">大圆角卡片</div><!-- 完全圆形 + 发光阴影 --><divclass="w-20 h-20 rounded-full bg-blue-500 shadow-[0_0_30px_rgba(59,130,246,0.6)]"></div><!-- 胶囊按钮 --><buttonclass="rounded-full px-6 py-2 bg-white shadow-lg hover:shadow-xl transition-shadow">胶囊按钮</button>

速查总结

核心原则：

1. 层级清晰：不同层级使用不同阴影深度
2. 交互反馈：悬停/按下/聚焦提供视觉反馈
3. 适度使用：避免过度阴影导致视觉混乱
4. 暗色适配：暗色模式使用更深的阴影增强对比
5. 性能优先：移动端慎用复杂阴影