要实现响应式卡片阴影效果，可以使用CSS中的box-shadow属性。以下是一个简单的例子：
HTML代码：
<div class="card">
<h2>卡片标题</h2>
<p>这里是卡片内容。</p>
</div>CSS代码：
.card {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 768px) {
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
}在上面的例子中，我们首先定义了一个.card的类来设置卡片的基本样式，包括背景颜色、内边距、边框半径和阴影。然后，我们使用@media查询来检测屏幕宽度是否大于等于768像素，如果是，则更改阴影的值以实现更大的阴影效果。
使用@media查询可以使我们根据屏幕宽度的不同来应用不同的CSS样式，从而实现响应式设计。