边框与阴影

Border 与 Outline

这组类名用于处理线条、圆角、焦点轮廓。

类名	效果说明
border-2	统一边线宽度
border-t-4	单独加重上边线
rounded-md	中等圆角
rounded-full	胶囊或圆形边角
outline-2	外层焦点线条宽度

<div class="border-2 border-blue-500 rounded-md p-4 mb-4 text-slate-900">
  统一描边卡片
</div>
<div class="border-t-4 border-red-500 rounded-full p-4 text-center bg-gray-50 mb-4 text-slate-900">
  胶囊样式与上边强调
</div>
<input class="w-full my-2 p-2 rounded outline-1 outline-blue-400" placeholder="输入框焦点轮廓" />

统一描边卡片

胶囊样式与上边强调

阴影层级

阴影类可快速建立前后层次。

类名	效果说明
shadow-sm	轻微阴影
shadow-md	中等阴影
shadow-xl	深层阴影

<div class="space-y-4">
  <div class="shadow-sm bg-white p-4 rounded-lg text-slate-900">轻微浮起层</div>
  <div class="shadow-md bg-white p-4 rounded-lg text-slate-900">中等浮起层</div>
  <div class="shadow-xl bg-white p-4 rounded-lg text-slate-900">明显浮起层</div>
</div>

轻微浮起层

中等浮起层

明显浮起层

图片卡片阴影样例

类名	效果说明
overflow-hidden	裁剪出界内容
shadow-md	卡片基础阴影
hover:shadow-2xl	悬停时投影增强
transition-shadow	仅阴影平滑过渡

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <figure class="rounded-xl overflow-hidden shadow-md duration-300 bg-white">
    <img class="h-50 w-full object-cover" src="/assets/samples/ALzNHhbtvttdzzB.webp" alt="阴影样例图一" />
    <figcaption class="p-3 text-sm text-slate-700">基础阴影卡片</figcaption>
  </figure>
  <figure class="rounded-xl overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-300 bg-white">
    <img class="h-50 w-full object-cover" src="/assets/samples/OgrhevbtvttdAsd.webp" alt="阴影样例图二" />
    <figcaption class="p-3 text-sm text-slate-700">悬停后阴影更深</figcaption>
  </figure>
</div>

基础阴影卡片

悬停后阴影更深