源代码：
下载代码
点击运行
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS 阴影效果展示</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50 p-8"> <!-- 添加了整体背景色和内边距使页面更美观 --> <h1 class="text-3xl font-bold text-center mb-8 text-gray-800"> Tailwind CSS 阴影效果展示 </h1> <!-- 无阴影 --> <div class="shadow-none bg-white p-4 m-4">无阴影</div> <!-- 小阴影 --> <div class="shadow-sm bg-white p-4 m-4">小阴影</div> <!-- 默认阴影 --> <div class="shadow bg-white p-4 m-4">默认阴影</div> <!-- 中等阴影 --> <div class="shadow-md bg-white p-4 m-4">中等阴影</div> <!-- 大阴影 --> <div class="shadow-lg bg-white p-4 m-4">大阴影</div> <!-- 特大阴影 --> <div class="shadow-xl bg-white p-4 m-4">特大阴影</div> <!-- 超大阴影 --> <div class="shadow-2xl bg-white p-4 m-4">超大阴影</div> </body> </html>
运行结果：
