Tailwind CSS 阴影学习笔记详细版一、阴影基础Box ShadowTailwind 使用shadow-{size}类设置box-shadow默认提供 7 种预设阴影从极淡到极深。1.1 预设阴影尺寸工具类CSS 效果 (近似)视觉描述典型用途shadow-sm0 1px 2px 0 rgba(0,0,0,0.05)极淡阴影轻微浮起、输入框shadow0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06)淡阴影默认卡片、按钮shadow-md0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)中等阴影悬浮卡片、下拉菜单shadow-lg0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)大阴影模态框、弹窗shadow-xl0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)超大阴影深度浮起、复杂层级shadow-2xl0 25px 50px -12px rgba(0,0,0,0.25)极大阴影强调浮层、英雄区shadow-innerinset 0 2px 4px 0 rgba(0,0,0,0.06)内阴影凹陷效果、输入框聚焦shadow-nonenone无阴影移除阴影1.2 使用示例!-- 基础卡片 --divclassbg-white rounded-lg shadow-md p-6中等阴影卡片/div!-- 悬浮按钮 --buttonclassbg-blue-500 text-white px-4 py-2 rounded shadow hover:shadow-lg transition-shadow悬停加深/button!-- 模态框 --divclassfixed inset-0 bg-black/50 flex items-center justify-centerdivclassbg-white rounded-xl shadow-2xl p-8 max-w-md模态框内容/div/div!-- 凹陷效果 --divclassbg-gray-100 rounded shadow-inner p-4凹陷区域/div二、阴影颜色Shadow ColorTailwind v3.0 支持自定义阴影颜色通过shadow-{color}类实现需配置或任意值。2.1 基础用法任意值!-- 蓝色阴影 --divclassshadow-[0_4px_14px_0_rgba(59,130,246,0.39)]蓝色发光阴影/div!-- 红色警告阴影 --divclassshadow-[0_0_15px_rgba(239,68,68,0.5)]红色发光/div2.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),}}}}divclassshadow-blue蓝色阴影卡片/divdivclassshadow-red红色警告卡片/div2.3 暗色模式阴影divclassshadow-md dark:shadow-lg dark:shadow-black/30暗色模式加深阴影/div三、阴影状态变体阴影可与所有状态修饰符组合实现动态交互效果。3.1 悬停阴影!-- 悬停加深 --divclassshadow-md hover:shadow-lg transition-shadow duration-300悬停浮起/div!-- 悬停发光 --divclassshadow-md hover:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all悬停发光/div3.2 聚焦阴影inputclassborder border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:shadow-lg/3.3 激活阴影buttonclassbg-blue-500 text-white px-6 py-2 rounded shadow-md active:shadow-sm active:translate-y-0.5 transition-all按下凹陷/button3.4 禁用阴影buttonclassshadow-md disabled:shadow-none disabled:opacity-50disabled禁用态无阴影/button四、响应式阴影!-- 移动端无阴影桌面端有阴影 --divclassshadow-none md:shadow-md lg:shadow-lg响应式阴影/div!-- 不同屏幕尺寸不同阴影 --divclassshadow-sm sm:shadow-md md:shadow-lg xl:shadow-xl渐进式阴影/div五、阴影实战模式5.1 卡片层级系统!-- 基础卡片 --divclassbg-white rounded-lg shadow p-4基础/div!-- 悬浮卡片 --divclassbg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-4悬浮/div!-- 深度浮起 --divclassbg-white rounded-xl shadow-xl p-6深度浮起/div!-- 模态框 --divclassfixed inset-0 bg-black/60 flex items-center justify-centerdivclassbg-white rounded-2xl shadow-2xl p-8 max-w-lg模态框/div/div5.2 下拉菜单divclassrelativebuttonclasspx-4 py-2 bg-white border rounded shadow-sm下拉菜单/buttondivclassabsolute top-full left-0 mt-1 w-48 bg-white rounded shadow-lg py-2 z-50aclassblock px-4 py-2 hover:bg-gray-100选项一/aaclassblock px-4 py-2 hover:bg-gray-100选项二/a/div/div5.3 按钮交互!-- 浮起按钮 --buttonclassbg-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!-- 发光按钮 --buttonclassbg-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!-- 凹陷按钮 --buttonclassbg-gray-200 text-gray-700 px-6 py-3 rounded shadow-inner hover:shadow-md hover:-translate-y-0.5 transition-all凹陷按钮/button5.4 图片/媒体展示!-- 图片悬停浮起 --divclassgroup relative overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadowimgsrccover.jpgclassw-full h-64 object-cover group-hover:scale-105 transition-transform/divclassabsolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-centerspanclasstext-white查看详情/span/div/div!-- 视频卡片 --divclassbg-white rounded-xl shadow-lg overflow-hiddendivclassaspect-video bg-gray-200imgsrcthumbnail.jpgclassw-full h-full object-cover//divdivclassp-4h3classfont-semibold视频标题/h3/div/div5.5 表单元素!-- 输入框聚焦阴影 --inputclassw-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/!-- 搜索框 --divclassrelativeinputclassw-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-shadowplaceholder搜索.../svgclassabsolute left-3 top-2.5 w-5 h-5 text-gray-400.../svg/div5.6 导航栏!-- 固定导航栏 --navclassfixed top-0 left-0 right-0 bg-white shadow-md z-50divclassmax-w-7xl mx-auto px-4 py-3 flex justify-betweenspanclassfont-boldLogo/spandivclassspace-x-4aclasshover:text-blue-500首页/aaclasshover:text-blue-500关于/a/div/div/nav!-- 滚动时阴影变化需 JS 控制类 --navclassbg-white transition-shadowidnavbar!-- 内容 --/navscriptwindow.addEventListener(scroll,(){constnavdocument.getElementById(navbar);if(window.scrollY10){nav.classList.add(shadow-md);}else{nav.classList.remove(shadow-md);}});/script5.7 悬浮提示Tooltipdivclassrelative groupbuttonclasspx-4 py-2 bg-blue-500 text-white rounded悬停查看提示/buttondivclassabsolute 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这是提示信息divclassabsolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900/div/div/div5.8 暗色模式阴影divclassbg-white dark:bg-gray-800 shadow-md dark:shadow-black/40 rounded-lg p-6h3classtext-gray-900 dark:text-white暗色模式卡片/h3pclassmt-2 text-gray-600 dark:text-gray-300暗色模式下使用更深的阴影增强层次感/p/div5.9 玻璃拟态 阴影divclassrelative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl shadow-xl p-6h3classtext-white font-semibold玻璃拟态卡片/h3pclasstext-white/80 mt-2配合阴影增强立体感/p/div5.10 骨架屏加载divclassanimate-pulsedivclassbg-gray-200 dark:bg-gray-700 rounded-lg shadow-sm h-48/divdivclassmt-4 space-y-2divclassbg-gray-200 dark:bg-gray-700 rounded h-4 w-3/4/divdivclassbg-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),}}}}divclassshadow-glow蓝色发光/divdivclassshadow-card hover:shadow-card-hover transition-shadow卡片/div6.3 任意值阴影!-- 自定义多层阴影 --divclassshadow-[0_4px_14px_0_rgba(59,130,246,0.39),0_10px_20px_rgba(0,0,0,0.1)]多层阴影/div!-- 自定义内阴影 --divclassshadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)]自定义内阴影/div七、阴影设计原则7.1 层级系统层级阴影类用途基础层shadow-sm输入框、标签内容层shadow/shadow-md卡片、按钮悬浮层shadow-lg下拉菜单、提示浮层shadow-xl模态框、弹窗强调层shadow-2xl英雄区、重点内容7.2 交互反馈悬停hover:shadow-lg浮起感按下active:shadow-sm凹陷感聚焦focus:shadow-lgfocus: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提升性能移动端慎用大阴影可能影响性能八、阴影与圆角配合!-- 小圆角 淡阴影 --divclassrounded-lg shadow-md小圆角卡片/div!-- 大圆角 大阴影 --divclassrounded-2xl shadow-xl大圆角卡片/div!-- 完全圆形 发光阴影 --divclassw-20 h-20 rounded-full bg-blue-500 shadow-[0_0_30px_rgba(59,130,246,0.6)]/div!-- 胶囊按钮 --buttonclassrounded-full px-6 py-2 bg-white shadow-lg hover:shadow-xl transition-shadow胶囊按钮/button速查总结功能核心类示例预设阴影shadow-sm~shadow-2xlshadow-md内阴影shadow-inner凹陷效果无阴影shadow-none移除阴影阴影颜色shadow-[{rgba}]任意值悬停阴影hover:shadow-lg交互反馈聚焦阴影focus:shadow-lg可访问性响应式md:shadow-lg屏幕适配暗色模式dark:shadow-black/40深色适配自定义shadow-{name}配置扩展过渡动画transition-shadow平滑变化核心原则层级清晰不同层级使用不同阴影深度交互反馈悬停/按下/聚焦提供视觉反馈适度使用避免过度阴影导致视觉混乱暗色适配暗色模式使用更深的阴影增强对比性能优先移动端慎用复杂阴影