在Semantic UI中，card类是用于构建卡片组件的基础类，默认已经包含了一些基础的样式，但阴影效果比较淡或者不符合部分设计需求时，我们可以通过自定义CSS的box-shadow属性来增强或调整卡片的阴影表现。
Semantic UI card类基础用法
首先我们需要引入Semantic UI的CSS文件，然后就可以使用card类来创建基础卡片。基础卡片的结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic UI卡片示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
</head>
<body>
<div class="ui card">
<div class="image">
<img src="https://picsum.photos/300/200?random=2" alt="卡片图片">
</div>
<div class="content">
<div class="header">卡片标题</div>
<div class="description">
这是一段卡片的描述内容，用于展示卡片的基本信息。
</div>
</div>
<div class="extra content">
<span class="right floated">发布时间：2024-05-20</span>
<span>
<i class="user icon"></i>
3 个评论
</span>
</div>
</div>
</body>
</html>
上面的代码会生成一个基础的Semantic UI卡片，默认的阴影效果比较轻微，接下来我们可以通过自定义CSS来修改阴影样式。
使用box-shadow自定义卡片阴影
box-shadow是CSS中用于设置元素阴影的属性，语法格式为：box-shadow: h-offset v-offset blur spread color inset;，各个参数的含义如下：
- h-offset：水平阴影偏移量，正值向右偏移，负值向左偏移
- v-offset：垂直阴影偏移量，正值向下偏移，负值向上偏移
- blur：阴影模糊半径，值越大阴影越模糊，默认为0
- spread：阴影扩散半径，正值阴影扩大，负值阴影缩小，默认为0
- color：阴影颜色，支持各种颜色表示方式
- inset：可选值，添加后阴影变为内阴影，不添加则为外阴影
覆盖默认卡片阴影
我们可以通过CSS选择器选中ui card类，然后重写box-shadow属性，示例代码如下：
/* 自定义Semantic UI卡片阴影 */
.ui.card {
/* 水平偏移0，垂直偏移4px，模糊8px，扩散0，颜色为半透明黑色 */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
transition: box-shadow 0.3s ease; /* 添加过渡效果，让阴影变化更平滑 */
}
/* 鼠标悬停时增强阴影效果 */
.ui.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3) !important;
}
这里使用!important是为了覆盖Semantic UI框架自带的box-shadow样式，如果你不想使用!important，可以提高自定义CSS的优先级，比如给卡片添加一个自定义类：
<div class="ui card custom-card">
<!-- 卡片内容 -->
</div>
对应的CSS代码可以改为：
/* 使用自定义类提高优先级，无需!important */
.ui.card.custom-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease;
}
.ui.card.custom-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
}
不同场景的阴影参数示例
根据不同的设计需求，我们可以调整box-shadow的参数，下面是几种常见的阴影配置：
| 阴影效果 | box-shadow参数 | 适用场景 |
|---|---|---|
| 轻微阴影 | 0 2px 4px 0 rgba(0,0,0,0.1) | 扁平化设计，卡片层级较低时 |
| 中等阴影 | 0 4px 8px 0 rgba(0,0,0,0.2) | 常规卡片，突出卡片层级 |
| 强烈阴影 | 0 8px 16px 0 rgba(0,0,0,0.3) | 重要卡片，需要明显突出时 |
| 内阴影 | inset 0 2px 4px 0 rgba(0,0,0,0.1) | 凹陷效果的卡片设计 |
完整示例代码
下面是一个完整的可运行示例，包含自定义阴影的Semantic UI卡片：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic UI自定义卡片阴影</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
<style>
.custom-shadow-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
transition: box-shadow 0.3s ease;
margin: 20px auto;
max-width: 300px;
}
.custom-shadow-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3) !important;
}
</style>
</head>
<body>
<div class="ui card custom-shadow-card">
<div class="image">
<img src="https://picsum.photos/300/200?random=3" alt="示例图片">
</div>
<div class="content">
<div class="header">自定义阴影卡片</div>
<div class="description">
这个卡片使用了自定义的box-shadow属性，阴影效果比默认样式更明显，鼠标悬停时还会有阴影增强的效果。
</div>
</div>
<div class="extra content">
<span>
<i class="star icon"></i>
4.5 评分
</span>
</div>
</div>
</body>
</html>
通过这种方式，我们可以灵活调整Semantic UI卡片的阴影效果，满足不同的设计需求，同时还能保持卡片原有的其他样式和功能。
Semantic_UIcard类box-shadowCSS阴影修改时间：2026-06-24 13:54:42