CSS 如何使用固定宽度的卡片堆叠成一副牌

在本文中，我们将介绍如何使用CSS制作一副具有固定宽度的卡片堆叠效果。通过掌握这个技巧，您可以在网页设计中实现各种卡片展示效果，如商品展示、图片展览等。

阅读更多：CSS 教程

定义卡片样式

首先，我们需要为每个卡片定义一个样式。假设每个卡片的固定宽度为200px，高度可以根据内容自适应。为了方便理解，我们给卡片添加一个虚线边框，代码如下：

.card {
  width: 200px;
  border: 1px dashed #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

在上述CSS代码中，我们定义了一个名为card的类，该类用于定义卡片的样式。每个卡片的宽度为200px，边框是虚线的，边框颜色为#ccc，内边距为10px。为了让卡片之间有一定的间距，我们还添加了一个margin-bottom属性，将下边距设置为10px。

创建卡片堆叠效果

接下来，我们需要将这些卡片堆叠在一起，形成一副牌的效果。为了实现卡片的堆叠效果，我们可以使用position和z-index属性来控制卡片的位置和层级关系。

首先，我们将卡片定位为绝对定位，以便我们可以通过调整top和left属性来控制卡片的位置。我们为卡片堆叠容器添加以下样式：

.card-stack {
  position: relative;
}

然后，我们使用nth-child选择器来选择每个卡片，并将其通过position属性进行定位。我们为每个卡片添加一个z-index属性，以便我们可以控制卡片的层级关系。代码如下：

.card-stack .card {
  position: absolute;
}

.card-stack .card:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 10;
}

.card-stack .card:nth-child(2) {
  top: 10px;
  left: 10px;
  z-index: 9;
}

.card-stack .card:nth-child(3) {
  top: 20px;
  left: 20px;
  z-index: 8;
}

.card-stack .card:nth-child(4) {
  top: 30px;
  left: 30px;
  z-index: 7;
}

/* 以此类推，根据需求添加更多的卡片定位 */

在上述代码中，我们通过nth-child选择器选择每个卡片，并使用top和left属性来定义每个卡片的位置。我们还使用z-index属性来控制卡片的层级关系，数值越大，表示卡片位于越上层。

示例

下面是一个示例，展示了如何创建一个固定宽度的卡片堆叠效果。每个卡片的宽度为200px，高度根据内容自适应。

<div class="card-stack">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

您可以根据需要添加更多的卡片，并根据上述代码中的定位样式，调整卡片的位置和层级关系。