CSS 中使用径向渐变实现卡券效果

关于“CSS 中使用径向渐变实现卡券效果”的攻略，以下是完整的详细讲解和两条示例说明。

准备工作

在进行效果实现前，我们需要准备以下内容：

• 一个 HTML 文档
• 一个 CSS 文档

步骤一：背景设置

首先，我们可以在 CSS 文件中使用 radial-gradient 函数来设置背景颜色，以下是一个示例：

background-image: radial-gradient(circle at 50% -10%, #FFDD93 60%, #FFC48C);

• radial-gradient：径向渐变函数，用于将一个颜色值渐变为另一个颜色值。
• circle：指定渐变的形状为圆形。
• at 50% -10%：指定渐变圆心坐标为横坐标 50%，纵坐标 -10%。
• #FFDD93 60%, #FFC48C：指定渐变的起始颜色和结束颜色。

步骤二：卡片设定

接下来我们将使用 div 元素创建一个卡片：

<div class="card"></div>

然后我们对卡片进行设定：

.card {
  width: 300px;
  height: 180px;  
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background-image: radial-gradient(circle at 50% -10%, #FFDD93 60%, #FFC48C);
  background-size: 120% 120%;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

• width: 300px; height: 180px：设置卡片的宽度和高度。
• box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2)：设定卡片阴影，让卡片看起来更有立体感。
• background-size：指定渐变的尺寸为原来的 1.2 倍，让渐变更加明显。
• border-radius: 10px：设置圆角，让卡片看起来更加圆润。
• overflow: hidden：设定卡片内容超出部分不显示。

步骤三：添加卡片内容

最后，我们可以在卡片中添加一些内容，例如添加标题和描述：

<div class="card">
  <div class="inner">
    <h1>优惠券</h1>
    <p>快来领取我们的新品优惠券，限时优惠！</p>
  </div>
</div>

.inner {
  padding: 30px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  text-align: center;
}
.inner h1 {
  margin-top: 0;
}
.inner p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 24px;
}

• padding: 30px：设定内部的 padding，让内容与边框之间留出空白。
• color: #fff：设定标题和描述的文字颜色为白色。
• position: absolute：将内容设置为绝对定位，让其在卡片中水平居中。
• bottom: 0; left: 0; width: 100%：设定内容的位置和宽度。
• background-color: rgba(0,0,0,0.5)：添加一层半透明的背景，使文字更加突出。
• text-align: center：将文本居中对齐。

示例一

以下是一个具有“饼干”的卡片效果示例：

<div class="card-with-cookie">
  <div class="inner">
    <h1>Cookie</h1>
    <p>新到饼干，快来尝一尝！</p>
  </div>
</div>

.card-with-cookie {
  width: 300px;
  height: 180px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background-image: radial-gradient(circle at 50% -10%, #FFDD93 60%, #FFC48C);
  background-size: 120% 120%;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.card-with-cookie:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1;
  border: 10px solid #F2B354;
}

在这个示例中，我们添加了卡片后面的饼干形状，使用 CSS 中的 :after 伪元素创建。具体来说，我们新增加了：

• .card-with-cookie：新增一个具有饼干的卡片类
• :after：在新增类上使用 :after 添加 border 和宽度高度，形成圆圈

示例二

以下是一个更加贴近商业活动的卡片效果示例：

<div class="card-for-sale">
  <div class="inner-for-sale">
    <h1>超级特卖</h1>
    <p>让我们一起超值享受！</p>
  </div>
</div>

.card-for-sale {
  width: 300px;
  height: 180px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background-image: radial-gradient(circle at 50% -10%, #FFDD93 60%, #FFC48C);
  background-size: 120% 120%;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.inner-for-sale {
  padding: 30px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: #E64545;
  z-index: 2;
}
.card-for-sale:before {
  content: '超级特卖';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background-color: #fff;
  color: #E64545;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 80px;
  border: 10px solid #E64545;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}
.card-for-sale:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 60px;
  height: 60px;
  background-color: #fff;
  z-index: 1;
  clip-path: polygon(0 0, 80% 0, 80% 100%, 0 100%);
  transform: translate(50%, -50%);
}

在这个示例中，我们又新增加了更多右侧文字及图案，具体新增的内容有：

• .card-for-sale：新增了又图案又文字的卡片类
• .inner-for-sale：修改内部参数，增加 z-index 属性，使其置于两个图案之上
• :before：使用 :before 伪元素添加一个旋转的圆圈，作为文字的背景
• :after：同样使用伪元素 :after 创造三角形状的效果，覆盖卡片右侧部分。使用 clip-path 属性使元素只占总宽度 80% 的上半部分，因为这部分不能遮挡之前的圆形图案。