Tailwind CSS 效果 #

<div class="shadow-sm">小阴影</div>
<div class="shadow">默认阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">超大阴影</div>
<div class="shadow-2xl">特大阴影</div>
<div class="shadow-inner">内阴影</div>
<div class="shadow-none">无阴影</div>

<div class="shadow shadow-blue-500">蓝色阴影</div>
<div class="shadow shadow-red-500">红色阴影</div>
<div class="shadow-lg shadow-indigo-500/50">半透明阴影</div>

<div class="shadow-[0_4px_20px_rgba(0,0,0,0.15)]">自定义阴影</div>

<div class="opacity-0">完全透明</div>
<div class="opacity-5">5% 不透明</div>
<div class="opacity-10">10% 不透明</div>
<div class="opacity-20">20% 不透明</div>
<div class="opacity-25">25% 不透明</div>
<div class="opacity-30">30% 不透明</div>
<div class="opacity-40">40% 不透明</div>
<div class="opacity-50">50% 不透明</div>
<div class="opacity-60">60% 不透明</div>
<div class="opacity-70">70% 不透明</div>
<div class="opacity-75">75% 不透明</div>
<div class="opacity-80">80% 不透明</div>
<div class="opacity-90">90% 不透明</div>
<div class="opacity-95">95% 不透明</div>
<div class="opacity-100">完全不透明</div>

<div class="opacity-50 hover:opacity-100 transition-opacity">
  悬停显示
</div>

<div class="mix-blend-normal">正常</div>
<div class="mix-blend-multiply">正片叠底</div>
<div class="mix-blend-screen">滤色</div>
<div class="mix-blend-overlay">叠加</div>
<div class="mix-blend-darken">变暗</div>
<div class="mix-blend-lighten">变亮</div>
<div class="mix-blend-color-dodge">颜色减淡</div>
<div class="mix-blend-color-burn">颜色加深</div>
<div class="mix-blend-hard-light">强光</div>
<div class="mix-blend-soft-light">柔光</div>
<div class="mix-blend-difference">差值</div>
<div class="mix-blend-exclusion">排除</div>
<div class="mix-blend-hue">色相</div>
<div class="mix-blend-saturation">饱和度</div>
<div class="mix-blend-color">颜色</div>
<div class="mix-blend-luminosity">亮度</div>

<div class="bg-blend-normal">正常</div>
<div class="bg-blend-multiply">正片叠底</div>
<div class="bg-blend-screen">滤色</div>
<div class="bg-blend-overlay">叠加</div>
<div class="bg-blend-darken">变暗</div>
<div class="bg-blend-lighten">变亮</div>
<div class="bg-blend-color-dodge">颜色减淡</div>
<div class="bg-blend-color-burn">颜色加深</div>
<div class="bg-blend-hard-light">强光</div>
<div class="bg-blend-soft-light">柔光</div>
<div class="bg-blend-difference">差值</div>
<div class="bg-blend-exclusion">排除</div>
<div class="bg-blend-hue">色相</div>
<div class="bg-blend-saturation">饱和度</div>
<div class="bg-blend-color">颜色</div>
<div class="bg-blend-luminosity">亮度</div>

<div class="backdrop-blur-none">无模糊</div>
<div class="backdrop-blur-sm">小模糊</div>
<div class="backdrop-blur">默认模糊</div>
<div class="backdrop-blur-md">中等模糊</div>
<div class="backdrop-blur-lg">大模糊</div>
<div class="backdrop-blur-xl">超大模糊</div>
<div class="backdrop-blur-2xl">特大模糊</div>
<div class="backdrop-blur-3xl">最大模糊</div>

<div class="backdrop-brightness-0">0%</div>
<div class="backdrop-brightness-50">50%</div>
<div class="backdrop-brightness-75">75%</div>
<div class="backdrop-brightness-90">90%</div>
<div class="backdrop-brightness-95">95%</div>
<div class="backdrop-brightness-100">100%</div>
<div class="backdrop-brightness-105">105%</div>
<div class="backdrop-brightness-110">110%</div>
<div class="backdrop-brightness-125">125%</div>
<div class="backdrop-brightness-150">150%</div>
<div class="backdrop-brightness-200">200%</div>

<div class="backdrop-contrast-0">0</div>
<div class="backdrop-contrast-50">50%</div>
<div class="backdrop-contrast-75">75%</div>
<div class="backdrop-contrast-100">100%</div>
<div class="backdrop-contrast-125">125%</div>
<div class="backdrop-contrast-150">150%</div>
<div class="backdrop-contrast-200">200%</div>

<div class="backdrop-grayscale-0">0%</div>
<div class="backdrop-grayscale">100%</div>

<div class="backdrop-hue-rotate-0">0度</div>
<div class="backdrop-hue-rotate-15">15度</div>
<div class="backdrop-hue-rotate-30">30度</div>
<div class="backdrop-hue-rotate-60">60度</div>
<div class="backdrop-hue-rotate-90">90度</div>
<div class="backdrop-hue-rotate-180">180度</div>

<div class="backdrop-invert-0">0%</div>
<div class="backdrop-invert">100%</div>

<div class="backdrop-opacity-0">0%</div>
<div class="backdrop-opacity-5">5%</div>
<div class="backdrop-opacity-10">10%</div>
<div class="backdrop-opacity-20">20%</div>
<div class="backdrop-opacity-25">25%</div>
<div class="backdrop-opacity-30">30%</div>
<div class="backdrop-opacity-40">40%</div>
<div class="backdrop-opacity-50">50%</div>
<div class="backdrop-opacity-60">60%</div>
<div class="backdrop-opacity-70">70%</div>
<div class="backdrop-opacity-75">75%</div>
<div class="backdrop-opacity-80">80%</div>
<div class="backdrop-opacity-90">90%</div>
<div class="backdrop-opacity-95">95%</div>
<div class="backdrop-opacity-100">100%</div>

<div class="backdrop-saturate-0">0</div>
<div class="backdrop-saturate-50">50%</div>
<div class="backdrop-saturate-100">100%</div>
<div class="backdrop-saturate-150">150%</div>
<div class="backdrop-saturate-200">200%</div>

<div class="backdrop-sepia-0">0%</div>
<div class="backdrop-sepia">100%</div>

<div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
  <h3 class="text-lg font-semibold">卡片标题</h3>
  <p class="text-gray-600 mt-2">悬停时阴影加深</p>
</div>

<div class="backdrop-blur-md bg-white/30 p-6 rounded-lg">
  <h3 class="text-lg font-semibold">毛玻璃卡片</h3>
  <p class="mt-2">背景模糊效果</p>
</div>

<div class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
  <div class="bg-white rounded-lg p-6 max-w-md">
    模态框内容
  </div>
</div>

<div class="relative">
  <img class="w-full h-64 object-cover" src="image.jpg">
  <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
  <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
    <h3 class="text-xl font-bold">图片标题</h3>
    <p class="mt-2">图片描述</p>
  </div>
</div>

<div class="relative h-64 bg-cover bg-center" style="background-image: url('image.jpg')">
  <h1 class="absolute inset-0 flex items-center justify-center text-6xl font-bold text-white mix-blend-difference">
    混合模式文字
  </h1>
</div>

<div class="group relative">
  <img class="w-full h-48 object-cover" src="image.jpg">
  <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
    <span class="text-white">悬停显示</span>
  </div>
</div>

<button class="bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/70 transition-shadow">
  彩色阴影按钮
</button>

<nav class="sticky top-0 backdrop-blur-md bg-white/70 border-b border-gray-200">
  <div class="container mx-auto px-4 py-4">
    导航栏内容
  </div>
</nav>