九、Tailwind CSS——阴影、背景与滤镜

一、阴影阴影box-shadow用来给元素增加立体感与层级感是卡片、按钮、弹窗等组件最常用的视觉手段。Tailwind 提供从轻到重的多档阴影也支持自定义颜色和内部阴影。1. 阴影大小shadow-sm ~ shadow-2xl作用说明使用shadow-*给元素添加投影档位越高阴影越大越模糊元素显得越“浮起”。v4 变化提醒v4 对阴影档位做了重命名并新增更轻的档位原来的shadow-sm改为shadow-xs原来的shadow改为shadow-sm并新增极轻的shadow-2xs。类名视觉强度常见用途shadow-2xs极轻极细微的层次shadow-xs很轻轻微浮起shadow-sm轻普通卡片、按钮默认态shadow-md中等下拉菜单、浮层shadow-lg较大模态框、对话框shadow-xl大需要强调的弹窗shadow-2xl特大hero 区域、大幅卡片!-- 普通卡片默认轻盈 --divclassrounded-xl bg-white p-6 shadow-sm普通卡片/div!-- 需要重点突出的弹窗 --divclassrounded-2xl bg-white p-8 shadow-2xl特大阴影弹窗/div!-- 移除阴影 --divclassshadow-none无阴影/div适用场景卡片列表用shadow-sm悬浮菜单用shadow-md或shadow-lg需要聚焦的模态框用shadow-xl以上。2. 内部阴影与颜色作用说明内部阴影shadow-inner让阴影出现在元素内部常用于凹陷效果shadow-颜色用来修改阴影颜色例如彩色阴影或降低不透明度。类名作用shadow-inner内部阴影产生凹陷感shadow-颜色指定阴影颜色如shadow-blue-500shadow-颜色/透明度指定阴影颜色和透明度如shadow-black/20!-- 内部阴影模拟按下 / 凹陷 --divclassrounded-lg bg-gray-100 p-6 shadow-inner凹陷区域/div!-- 彩色阴影 --divclassrounded-xl bg-white p-6 shadow-lg shadow-blue-500/40蓝色半透明阴影/div!-- 深色、更柔和的阴影 --divclassrounded-xl bg-white p-6 shadow-2xl shadow-black/10柔和的黑色阴影/div避坑指南shadow-颜色需要和shadow-*尺寸类一起使用才有效果单独写shadow-blue-500没有大小。另外 v4 默认阴影是黑色半透明想改成彩色时建议同时指定透明度视觉上会更自然。二、透明度1. opacity 各等级作用说明opacity-*控制整个元素包括文字、背景、边框、子元素的不透明度。数值越小越透明opacity-0完全透明opacity-100完全不透明。类名不透明度opacity-00%opacity-2525%opacity-5050%opacity-7575%opacity-100100%!-- 半透明卡片背景内容隐约透出 --divclassbg-white p-6 opacity-50半透明卡片/div!-- 图片 hover 变清晰提示可点击 --imgsrc/cover.jpgclassopacity-80 transition hover:opacity-100alt封面/!-- 任意值 --divclassopacity-[.67]67% 透明度/div避坑指南opacity影响的是整个元素如果只想让背景透明而文字保持清晰应使用颜色透明度写法如bg-black/50而不是给整个元素加opacity-50。三、混合模式混合模式blend mode决定两个重叠内容如何叠加颜色常用于图片与背景、文字与图片的融合。1. mix-blend作用说明mix-blend-*控制元素与其下方内容的混合方式。常用multiply正片叠底、screen滤色、overlay叠加。类名效果mix-blend-normal正常mix-blend-multiply正片叠底去白留深mix-blend-screen滤色去黑留亮mix-blend-overlay叠加mix-blend-difference差值!-- 图片与背景正片叠底常用于白底图片融入背景 --imgsrc/logo.pngclassmix-blend-multiplyaltlogo/!-- 文字与图片差值混合产生艺术效果 --h1classmix-blend-difference text-white标题文字/h12. bg-blend作用说明bg-blend-*控制元素自身多个背景层如背景图与背景色、背景图与渐变之间的混合方式。注意与mix-blend的区别bg-blend只作用于元素内部的多层背景。类名效果bg-blend-normal正常bg-blend-multiply正片叠底bg-blend-screen滤色bg-blend-overlay叠加!-- 背景图和背景色叠加再与渐变混合 --divclassbg-[url(/photo.jpg)] bg-cover bg-blue-500 bg-blend-multiply背景图叠加蓝色并正片叠底/div避坑指南mix-blend-*是“元素与外部内容混合”bg-blend-*是“元素自身多层背景混合”两者作用对象不同不要混用。四、背景图与渐变背景1. 背景图设置作用说明背景图相关类负责设置图片 URL、尺寸、位置、重复方式等。URL 使用任意值写法bg-[url(...)]。类名作用bg-[url(/img/hero.jpg)]设置背景图bg-cover铺满容器可能裁剪bg-contain完整显示可能留白bg-center居中bg-top/bg-bottom/bg-left/bg-right定位bg-no-repeat不重复bg-fixed固定背景视差感!-- 全屏 hero 背景图铺满、居中、不重复 --sectionclassh-96 bg-[url(/images/hero.jpg)] bg-cover bg-center bg-no-repeath1classpt-24 text-center text-4xl text-white欢迎/h1/section!-- 小 logo 背景完整显示并居中 --divclassh-20 w-20 bg-[url(/images/logo.png)] bg-contain bg-center bg-no-repeat/div避坑指南背景图 URL 里的路径要用引号包裹且任意值中不能有空格需要空格可用下划线代替或用 URL 编码。建议配合bg-cover bg-center一起使用避免图片变形。2. 渐变背景作用说明v4 将渐变统一为bg-linear-*线性、bg-radial-*径向、bg-conic-*锥形三类配合from-*、via-*、to-*设置渐变颜色。v3 的bg-gradient-to-r在 v4 中应写为bg-linear-to-r。类名作用bg-linear-to-r从左到右线性渐变bg-linear-to-t从下到上bg-linear-to-br到右下角bg-radial径向渐变bg-conic锥形渐变from-*/via-*/to-*起点 / 中间 / 终点颜色!-- 左右线性渐变 --divclassh-32 bg-linear-to-r from-blue-500 to-purple-500/div!-- 三段渐变 --divclassh-32 bg-linear-to-r from-blue-500 via-purple-500 to-pink-500/div!-- 径向渐变 --divclassh-32 bg-radial from-yellow-300 to-red-500/div使用指南渐变方向用bg-linear-to-方向颜色用from/via/to。可以再加颜色透明度如from-blue-500/50或渐变位置from-10% via-50% to-90%。五、常用滤镜滤镜filter直接改变元素视觉表现图片处理最常用。v4 的滤镜同样做了部分重命名。1. 模糊blur作用说明blur-*让元素变模糊档位越高越模糊。v4 中原来的blur改名为blur-sm原来的blur-sm改名为blur-xs。类名模糊半径blur-xs4pxblur-sm8pxblur-md12pxblur-lg16pxblur-xl24pxblur-2xl40pxblur-3xl64pximgsrc/avatar.jpgclassblur-mdalt模糊图片/!-- hover 清晰常用于隐私内容 --imgsrc/photo.jpgclassblur-lg transition hover:blur-nonealt照片/2. 亮度brightness作用说明brightness-*调整元素亮度大于 100 变亮小于 100 变暗brightness-0全黑。类名亮度brightness-5050%brightness-7575%brightness-100100%默认brightness-125125%brightness-200200%!-- hover 提亮 --imgsrc/cover.jpgclassbrightness-75 transition hover:brightness-110alt封面/3. 对比度contrast作用说明contrast-*调整明暗对比contrast-0变为纯灰大于 100 增强对比。类名对比度contrast-5050%contrast-100100%默认contrast-125125%contrast-200200%imgsrc/photo.jpgclasscontrast-125alt高对比图片/六、其他滤镜1. 灰度grayscale作用说明grayscale将元素变为黑白grayscale-0恢复彩色。常用于悬停前后对比。类名作用grayscale100% 灰度grayscale-0无灰度!-- 默认黑白hover 变彩色 --imgsrc/photo.jpgclassgrayscale transition hover:grayscale-0alt照片/2. 色相旋转hue-rotate作用说明hue-rotate-*旋转色相单位是度用于改变整体色调。类名角度hue-rotate-1515°hue-rotate-3030°hue-rotate-6060°hue-rotate-9090°hue-rotate-180180°imgsrc/photo.jpgclasshue-rotate-90alt色相旋转/3. 反色invert作用说明invert反转颜色得到负片效果invert-0恢复。类名作用invert100% 反色invert-0无反色imgsrc/photo.jpgclassinvertalt反色图片/4. 饱和度saturate作用说明saturate-*控制色彩浓度大于 100 更鲜艳saturate-0变为黑白。类名饱和度saturate-00%黑白saturate-5050%saturate-100100%默认saturate-150150%saturate-200200%imgsrc/photo.jpgclasssaturate-150alt高饱和图片/七、投影与背景模糊1. drop-shadow作用说明drop-shadow-*和shadow-*的区别在于drop-shadow是滤镜会沿着元素的透明轮廓投影尤其适合带透明背景的图片或图标而shadow是盒阴影只沿矩形边框投影。v4 同样重命名原来的drop-shadow改为drop-shadow-smdrop-shadow-sm改为drop-shadow-xs。类名作用drop-shadow-xs很轻投影drop-shadow-sm轻投影drop-shadow-md中等投影drop-shadow-lg较大投影drop-shadow-2xl特大投影!-- PNG 图标沿轮廓投影 --imgsrc/logo.pngclassdrop-shadow-lgaltlogo/!-- 彩色投影 --imgsrc/icon.pngclassdrop-shadow-md drop-shadow-blue-500/40alticon/避坑指南对于普通矩形元素用shadow-*性能更好只有处理带透明区域的图片 / 图标时才需要drop-shadow-*。2. backdrop-filter作用说明backdrop-*系列对元素背后的内容施加滤镜常用于毛玻璃frosted glass效果让背景模糊但不影响元素自身内容。类名作用backdrop-blur-sm背景模糊backdrop-brightness-*背景亮度backdrop-contrast-*背景对比度backdrop-grayscale背景灰度backdrop-saturate-*背景饱和度!-- 毛玻璃导航栏 --navclassbg-white/70 backdrop-blur-mdahref#classpx-4 py-3首页/aahref#classpx-4 py-3关于/a/nav!-- 背景模糊 提饱和 --divclassbg-white/60 backdrop-blur-lg backdrop-saturate-150毛玻璃卡片/div使用指南毛玻璃效果一般搭配半透明背景如bg-white/70和backdrop-blur-*一起使用。backdrop-filter会影响浏览器渲染性能避免在大量元素上滥用。