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

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

实现如下三种情况：

1、第一种情况（纯色）

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

<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、第二种情况（渐变，圆在左右两边）

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

<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、第三种情况（渐变，圆在上下两边）

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

<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; }

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

原文链接：https://blog.csdn.net/pinena/article/details/89708024?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316781667814000%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316781667814000&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-6-89708024-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0