css3实现优惠券效果（向内凹的圆）

背景色和自身（优惠券）的颜色会改变，实现向内凹的圆效果，效果图如下。如果叫设计师切好几十种背景图是很不现实的，只能用代码来实现，性能会比较好。随着背景色的改变，向内凹圆的背景色也要跟着变，因此，向内凹陷的部分只能设置成透明。

实现如下三种情况：

css3实现优惠券效果（向内凹的圆）

1、第一种情况（纯色）

css3实现优惠券效果（向内凹的圆）

自身（优惠券）的颜色是纯色的，这个实现起来比较简单，主要代码如下：

<div class="box"></div>

 .box{
      width: 160px;
      height: 100px;
      background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%);
      background-position: 121px -8px;
      background-size: 100% 100px;
    }

radial-gradient() 函数创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变。其语法是：

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

background-position:圆画在优惠券的左边

background-size: （x,y）两个圆之间的距离

2、第二种情况（渐变，圆在左右两边）

css3实现优惠券效果（向内凹的圆）

可以把优惠券划分为三个部分：左边圆，中间主体，右边圆，主要代码如下：

<div class="box1"></div>

.box1 {
      width: 160px;
      height: 100px;
      background: radial-gradient(circle at 0 51px, transparent 15px, #fe8864 6px) top left, linear-gradient(0.25turn, #fe8864, #FE5151), radial-gradient(circle at 18px 51px, transparent 15px, #FE5151 16px) bottom right;
      background-size: 17px 100px, 116px 100px, 17px 100px;
      background-repeat: no-repeat;
      background-position: 10px 0px,26px 0px,142px 0px;
	}

左边圆的颜色取线性渐变的开始，右边圆的颜色取线性渐变颜色的结束值

3、第三种情况（渐变，圆在上下两边）

css3实现优惠券效果（向内凹的圆）

把优惠券分为四个部分，左边主体线性渐变，上圆，下圆，右边主体线性渐变，主要代码如下：

<div class="box2"></div>

.box2 {
      width: 160px;
      height: 100px;
      background: linear-gradient(0.25turn, #fe8864, #FE5151), radial-gradient(circle at 11px 4px, transparent 6px, #FE5151 6px) top left, radial-gradient(circle at 10px 56px, transparent 6px, #FE5151 6px) bottom left, linear-gradient(0.25turn, #FE5151, #fe434c);
      background-size: 120px 82px, 20px 50px, 20px 57px, 32px 84px;
      background-repeat: no-repeat;
      background-position: 0px 0px,120px -4px, 120px 26px, 140px 0px;
    }

上圆的下圆的颜色值是取圆所在位置的值，右边主体线性渐变再从圆的颜色值开始到结束的颜色值

css3实现优惠券效果（向内凹的圆）

相关推荐