纯CSS 优惠券 镂空

话不多说先看成品图

优惠券镂空效果

项目中时常会遇到这样的设计，一张优惠券，两边挖空了一个半圆，现在我们用纯 CSS 的方式，配合必要的元素节点，把这个效果做出来。

思路

1、划分区域。

优惠券的内容部分跟中间的分割线和挖空是相独立的，所以把刚才的图分为三个部分：上部、分割部分以及下部。上下部完全不是问题，集中解决下分割部分。

2、分割线

首先实现简单的，分割线段，直接用 border 实现 border-bottom: 1px dashed #ccc ，同时为了跟周围内容形成距离，设置了 margin: 10px。简单省心。

分割线效果示意

3、“ 挖 ” 空

这是最关键的一步了，虽然说是挖，但是其实白色背景并没有少，而是找东西覆盖。可以注意到，这里的背景是一个纯深红色，只要靠边边的元素与其同色，就能融入到背景中，做出挖空的错觉。直接搞起……
这里用到两个色块，一左一右，不用多想，::before 和 ::after 伪类走起。几个关键的样式:

position: absolute;
top: 5px;
left/right: -15px
border-radius: 50%;

利用绝对定位让圆圈一半偏出优惠券，再对齐以及设置圆角。

大功告成

但是

也并非完美，利用这个方法存在一些漏洞

• 如果背景并非纯色，伸出去的伪类块可能无法融入到背景中，影响挖空效果。
• 如果优惠券使用了阴影，那个挖空的部分并不适合阴影，使惠券出现阴影断层的现象

（我的成品中为了避免阴影断层，使用了比较浅的阴影，减少视觉影响。）

---

19/07/01 补充

上面提到阴影断层的问题，其实早就找到解决方案了，一直忘记上来补充，先看东西。

描边效果及阴影融合

上图效果可以看到，偏出的圆无论是边框还是阴影，都几乎可以以假乱真了，其中的关键点就是在偏出圆上设置 inset 的阴影效果，配合阴影的位移、blur、缩放等参数调整至融合的效果。

比如上图右边，外框阴影 10px 的情况下，我给偏出圆设置了 0 ±20px 10px -16px inset 的阴影效果，以达到完美融合，这个还需根据不同情况自己慢慢尝试。

---

网上实现镂空的方法有很多，我选了一个性价比较高的方式实现，更多方法有待补充。