CSS3_03：各种卡券优惠券模板制作，开箱即用，学得会，用得着

本文首发于微信公众号：布依前端
微信号：qny-1009
转载请注明出处
原创不易，觉得有用的话，多转发点赞支持

作为前端开发者，经常碰到不规则元素需求，尤其是购物类的优惠券，元素长相怪异，没有接触过就会犯懵，见多识广，会者不难。安利一波这类效果制详细过程，下列所有案例的径向渐变和线性渐变属性都是可以自行调试的，包括遮罩位置和遮罩元素大小，案例中遮罩圆的大小可以通过渐变参数调节的。

       想到CSS不规则图形，想到径向渐变遮罩能实现，先看看最终实现的整体效果。文章篇幅有点长，耐心看完，收获慢慢。

图解：图中 1 和 2 优惠券效果是单独径向渐变组合的效果，其余都是CSS蒙版mask实现的。

新建一个HTML文件，把通用样式和页面结构复制粘贴到文件内部，用浏览器打开可以查看效果。

通用样式，其余样式逐渐往下添加，每个优惠券可能样式不一样。

页面结构

图一制作

原理：利用背景图属性的大小，位置和默认平铺元素实现，背景用径向渐变（默认透明，大小自定义)完成，利用背景属性size和position调整平铺元素之间的间距和位置，就能形成抠图效果，这种方式缺点是无法实现背景渐变效果。

background-size: x y；x表示调整背景元素水平方向间距，y表示调整元素垂直方向的间距。

background-position: x y；x表示背景元素水平方向位置，y表示背景元素垂直方向位置。

调整过程如图所示

效果如下

利用伪类元素添加虚线

完成后效果展示

图四制作

原理：利用css的蒙版mask属性来遮罩，蒙版的参数属性和背景参数相似，也有size和position属性，作用和背景图的一致，效果演示查看图一制作过程，这种方式可以设置渐变背景效果，增加样式。

得到效果是这样的，裁剪同时具备渐变效果。

图二制作

图二利用径向渐变四个拼接而成，每个径向渐变占四分之一，每个径向渐变部分位置分别为左上角，右上角，左下角和右下角。这种方式缺点：无法设置元素渐变效果。如果要用渐变可以用图一或者图四代码。

图三制作

图三利用蒙版mask和图一或者图四相似，这里是两个蒙版渐变属性整合，同时能实现渐变背景效果。

注意：如果需要多个径向渐变效果，那么可以简写单个径向渐变属性，多个用都号隔开。反之，可以单独设置径向渐变效果属性，如下注释部分的代码。

图六制作

图六利用径向渐变做背景裁剪，线性渐变做背景色分离效果，设置渐变颜色占比就能实现颜色分离，不会产生渐变效果。

总结：mask遮罩抠图是利用背景图默认平铺效果，可以调节背景图重复元素的间距和位置实现抠图效果，可以实现渐变背景效果。而图二中的背景径向渐变是拼图原理，利用四个角来拼接抠图。实现优惠券效果的方式目前分享这两种，后期有用到的在分享出来。