Layui 无内置 layui-card 模块，需用 div 自定义类名配合 CSS 实现卡片布局；基础结构含 header/body/footer，通过 box-shadow 添加阴影，适配栅格系统并支持主题扩展。
Layui 本身没有内置名为 layui-card 的官方模块，卡片式布局需通过组合基础结构（如 layui-card 并非原生类名）+ CSS 自定义实现。官方推荐使用 layui-card 类名是社区常见误传，实际应基于 layui-card 的视觉语义，用 div 搭配 layui-card 自定义类 + 原生 CSS 控制阴影。
1. 基础卡片结构（符合 Layui 语义风格）
使用标准 div 定义卡片容器，添加自定义类名（如 layui-card），并按区块划分头部、主体、底部：
<div class="layui-card">
<div class="layui-card-header">卡片标题</div>
<div class="layui-card-body">
这里是卡片内容，支持文字、表单、表格等任意 HTML。
</div>
<div class="layui-card-footer">操作按钮或说明</div>
</div>
2. 添加自定义阴影（推荐使用 box-shadow）
Layui 默认不带阴影，需手动添加 CSS。推荐在全局样式或页面 style 中写入：
.layui-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 轻量柔和阴影 */
background-color: #fff;
margin-bottom: 20px;
}
<p>/<em> 鼠标悬停增强效果（可选） </em>/
.layui-card:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
transition: box-shadow 0.3s ease;
}</p>
- 阴影参数说明：`0 4px 12px` 表示水平偏移 0、垂直偏移 4px、模糊半径 12px；`rgba(0,0,0,0.08)` 控制深浅与透明度
- 可替换为 `0 2px 8px rgba(0,0,0,0.06)`（更轻）或 `0 8px 30px rgba(0,0,0,0.15)`（更强）
- 避免使用
text-shadow或图片阴影，保持性能与一致性
3. 适配 Layui 栅格与内边距
让卡片自然融入 Layui 布局系统，建议配合 layui-row / layui-col 使用，并统一内边距：
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">用户统计</div>
<div class="layui-card-body" style="padding: 20px 15px;">
<p>总用户：<strong>12,486</strong></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img
src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="overflowclass">深蓝色网站后台管理系统layui框架模板-AdminPro</a>
<p class="overflowclass">一款深蓝色网站后台管理系统layui框架模板</p>
</div>
<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">今日订单</div>
<div class="layui-card-body" style="padding: 20px 15px;">
<p>新增：<strong>86</strong></p>
</div>
</div>
</div>
</div>
- 卡片内部建议用
layui-card-body统一控制 padding，避免直接写 inline style - 头部和底部默认无 padding，如需间距可单独加
padding: 12px 15px - 配合
layui-btn、layui-table等组件时，确保子元素不破坏卡片圆角（设overflow: hidden已生效）
4. 主题色与状态扩展（可选）
通过添加后缀类实现不同色调卡片，例如：
.layui-card.primary { border-left: 4px solid #009688; }
.layui-card.warning { border-left: 4px solid #FFB800; }
.layui-card.danger { border-left: 4px solid #FF5722; }
- 结合
layui-card-header的字体加粗、图标（如）提升识别度 - 禁用阴影场景下，可用
border: 1px solid #f2f2f2替代，保持简洁感 - 深色模式适配：可监听
prefers-color-scheme或添加 data-theme 属性动态切换背景与阴影色值
不复杂但容易忽略的是：Layui 的卡片本质是语义化结构 + CSS 表现，无需引入额外 JS 模块。关键在于统一类名、合理阴影参数、以及与栅格系统的自然嵌套。
