在网页设计中，层叠优惠券效果能够吸引用户的注意力，提升用户体验和转化率。下面就为大家详细介绍如何使用 CSS 实现这一效果。

创建 HTML 结构。我们需要为每张优惠券创建相应的 HTML 元素。例如，可以使用 <div> 标签来表示优惠券。给每个优惠券 <div> 赋予唯一的类名，方便后续 CSS 样式的编写。为了实现层叠效果，将这些优惠券元素放置在一个父容器 <div> 中，该父容器可以设置一个固定的宽度和高度，以确定优惠券展示的区域大小。

接下来，进入关键的 CSS 部分。设置优惠券的基本样式，如宽度、高度、背景颜色、边框等。通过设置 border-radius 属性可以让优惠券的边角呈现圆润效果，增加美观度。例如：

.coupon {
    width: 200px;
    height: 120px;
    background-color: #ffc107;
    border: 1px solid #000;
    border-radius: 10px;
}

为了实现层叠效果，我们要利用 CSS 的定位属性。给优惠券元素设置 position: relative;，这将允许我们对其进行相对定位。然后，通过设置 z-index 属性来控制优惠券的层叠顺序。z-index 值越大的元素会显示在越上层。例如，让第一张优惠券的 z-index 为 3，第二张为 2，第三张为 1：

.coupon1 {
    z-index: 3;
}
.coupon2 {
    z-index: 2;
}
.coupon3 {
    z-index: 1;
}

为了让优惠券有错落的视觉效果，可以使用 top 和 left 属性对其进行微调。比如，让第二张优惠券相对于第一张优惠券向下和向右偏移一定距离，第三张优惠券再在此基础上进一步偏移：

.coupon2 {
    top: 10px;
    left: 10px;
}
.coupon3 {
    top: 20px;
    left: 20px;
}

最后，为了让用户在鼠标悬停在优惠券上时能有交互效果，可以添加 :hover 伪类。例如，当鼠标悬停时改变优惠券的背景颜色，提升用户体验：

.coupon:hover {
    background-color: #ff9800;
}

通过以上步骤，利用 CSS 就能轻松实现层叠优惠券效果。无论是电商网站还是促销活动页面，这种效果都能为页面增添吸引力，让用户更直观地感受到优惠信息。