CSS 使用radial-gradient 实现优惠券样式-前端开发

下面是关于“CSS 使用radial-gradient 实现优惠券样式”的完整攻略，希望对你有所帮助。

下面是关于“CSS 使用radial-gradient 实现优惠券样式”的完整攻略，希望对你有所帮助。

什么是radial-gradient

radial-gradient是CSS中用于创建径向渐变的函数，它可以通过指定多个色标来创建复杂的渐变效果。 radial-gradient函数的语法如下：

background: radial-gradient(shape size at position, start-color, ..., last-color);

其中，shape指定渐变的形状，可选值有ellipse和circle； size指定渐变的大小，可选值有farthest-side、closest-side、farthest-corner和closest-corner；at指定渐变的位置，可以使用关键字或者像素值等方式来指定；start-color和last-color分别指定渐变的开始颜色和结束颜色，可以指定多个中间颜色，每个颜色用逗号分隔。

使用radial-gradient 实现优惠券样式

对于优惠券样式，我们通常会考虑使用渐变来实现。下面我们将使用radial-gradient函数来实现具有以下特点的优惠券样式：

背景为从浅绿色到深绿色的径向渐变
在优惠券的顶部和底部显示箭头，箭头颜色和渐变颜色相同
优惠券边框颜色为绿色，虚线样式

我们将通过2个示例来详细讲解如何使用radial-gradient函数来实现上述优惠券样式。

示例1：实现简单的优惠券

首先，我们来实现一个简单的优惠券样式，该样式没有箭头和边框，只有径向渐变的背景。

<!doctype html>
<html>
<head>
  <style>
    .coupon{
      background: radial-gradient(circle, #b9eec2, #4BB543);
      height: 100px;
      width: 200px;
      text-align: center;
      line-height: 100px;
      font-size: 36px;
      color: white;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="coupon">50% OFF</div>
</body>
</html>

在上面的代码中，我们使用radial-gradient函数来创建了一个从浅绿色到深绿色的径向渐变。我们还为优惠券设置了圆角和文字样式，并将优惠券文本置于优惠券中心。

示例2：进阶版优惠券

接下来，我们将创建进阶版的优惠券，该优惠券包含有箭头和边框，代码如下：

<!doctype html>
<html>
<head>
  <style>
    .coupon{
      position: relative;
      background: radial-gradient(circle, #b9eec2, #4BB543);
      height: 100px;
      width: 200px;
      text-align: center;
      line-height: 100px;
      font-size: 36px;
      color: white;
      border-radius: 10px;
    }
    .coupon::before, .coupon::after{
      content: "";
      position: absolute;
      border-style: solid;
      border-color: #4BB543 transparent transparent transparent;
      bottom: -10px;
      border-width: 10px 10px 0 10px;
      z-index: 2;
    }
    .coupon::before{
      left: 0;
    }
    .coupon::after{
      right: 0;
      transform: scaleX(-1);
    }
    .coupon-wrapped{
      height: 120px;
      width: 220px;
      border-radius: 12px;
      padding: 10px;
      border: 3px dashed #4BB543;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    .coupon-wrapped::before, .coupon-wrapped::after{
      content: "";
      position: absolute;
      top: -6px;
      left: -6px;
      width: 100%;
      height: 100%;
      border: 3px dashed #4BB543;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <div class="coupon-wrapped">
    <div class="coupon">50% OFF</div>
  </div>
</body>
</html>

在上述代码中，我们通过coupon-wrapped类来包裹coupon类的优惠券，并为coupon-wrapped类设置了边框样式和圆角。我们还在coupon-wrapped类中定义了coupon::before和coupon::after这2个伪元素，用于在优惠券的底部绘制箭头。

具体地，我们使用border-style: solid来指定边框样式为实线，将border-color的左右和顶部设置为透明，底部设置为绿色，实现了三角形。另外，为了使箭头能够穿透coupon-wrapped类的边框线，我们将coupon-wrapped类的z-index设置为1，将coupon::before和coupon::after的z-index设置为2。

在coupon::before中，我们将箭头放置在左侧，而在coupon::after中，我们将箭头放置在右侧，并使用transform: scaleX(-1);将箭头水平翻转，实现了符合预期的优惠券样式。