在实际的网页开发过程中，总会遇到各种各样的布局。公司同事问我有没有什么好办法实现这样的布局，就是活动充值页面上很常见的优惠券效果。还有下面的，考虑到各种可能出现的场景，抽象出来下面我们来看一下案例的实现。1.最佳实现方式首先，这类布局的最佳实现方式肯定是mask遮蔽。关于mask，大家可以看看CSS3Mask的安利报告。这里简单介绍一下基本语法。很简单，和后台语法基本一致。position]/[size];}这里的遮罩图基本上和背景一样使用。它可以是PNG图像、SVG图像或渐变绘制的图像。它还支持多图像叠加。遮蔽的原理很简单。最终效果只显示不透明部分，透明部分将不可见。半透明类比。其实除了透明度（Alpha）作为遮蔽条件外，还可以通过亮度（luminance）来决定，比如White表示隐藏，black表示可见。不过目前只有Firefox支持，所以只要你会画出上面的形状就可以实现了。2、大多数凹圆角的优惠券都有一个明显的特征，那就是凹圆角。说到圆角，很容易想到radial-gradient?fileGuid=kDGWvXGxTXG6KrrQ)。这个语法有点复杂，记不住没关系，可以从张老师的这10个demo例子中学习CSS3radial-gradient径向渐变。.content{-webkit-mask:radial-gradient(circleatleftcenter,transparent20px,red20px);}这样就绘制了一个半径为20px的透明圆，但是在代码层面还有很大的优化空间。实现边界清晰的渐变时，背面颜色的位置只需小于或等于正面颜色的位置即可。例如0的透明色可以用#0000等十六进制缩写代替。只需为不透明部分使用一种颜色。我喜欢用红色，主要是因为字比较短，渐变的位置默认居中，所以可以去掉第二个中心，左边可以用0表示。测试发现移动端没有支持十六进制，所以还是要用。transparent或者rgba的形式进一步简化得到.content{-webkit-mask:radial-gradient(circleat0,#000020px,red0);}还不错，少了几个B流量~可以查看网上例子Codepen优惠券实现13.优惠券效果上面是最基本的凹圆角效果。下面我们来实现下面的布局，比如两个半圆。根据上面的例子，我们可以只复制一个圆圈吗？改变定位方向。content{-webkit-mask:radial-gradient(circleat0,#000020px,red0),radial-gradient(circleatright,#000020px,red0);}然后我们发现一个圆圈没有了。原因其实很简单。如下图，两层背景相互叠加，导致整个背景变得不透明，所以遮罩效果完全可见。有两种解决方法，即：错开两个凹角，这里可以修改大小和位置，同时需要禁止tiling.content{-webkit-mask:radial-gradient(circleat0,#000020px,red0),radial-gradient(circleatright,#000020px,red0);-webkit-mask-size:51%;/*避免间隙*/-webkit-mask-position:0,100%;/*左边一个，右边一个*/-webkit-mask-repeat:no-repeat;}动态演示如下，以免互相覆盖。可以查看在线示例codepencouponimplementation2使用mask合成mask-composite，这个你可能不熟悉。简单介绍一下标准属性下的mask-composite有4个属性值（Firefox支持）/*关键字值*/mask-composite:add;/*覆盖（默认）*/mask-composite:subtract;/*相减，排除上层区域*/mask-composite:intersect;/*相交，只显示重叠的地方*/mask-composite:exclude;/*exclude，只显示不重叠的地方*/这个可能有点不一样好理解，其实可以参考一些绘图软件的shape合成操作，比如photoshop-webkit-mask-composite就是不一样的从标准值来看，有很多属性值，见下-webkit-mask-composite:clear;/*清除，不显示任何遮罩*/-webkit-mask-composite:copy;/*只显示上掩码，不显示下掩码*/-webkit-mask-composite:source-over;-webkit-mask-composite：来源；/*只显示重叠的地方*/-webkit-mask-composite:source-out;/*只显示上面的mask，不显示重叠的地方*/-webkit-mask-composite:source-atop;-webkit-mask-composite:destination-over;-webkit-mask-composite:destination-in;/*只显示重叠的地方*/-webkit-mask-composite:destination-out;/*只显示下面的mask，重叠的地方不显示*/-webkit-mask-composite:destination-atop;-webkit-掩码复合：异或；/*只显示不重叠的地方*/你是不是一头雾水？不要惊慌，可以看到上面有几个值是source-开头的，还有一些是destination-开头的。source代表新内容，也就是上面绘制的图层，destination代表元内容，也就是下面绘制的图层。（在CSS中，前层将覆盖后层）。这里的属性值其实是借鉴了Canvas中的概念。具体可以查看CanvasRenderingContext2D.globalComposite。不记得也没关系。大家可以在实际开发中一一测试。]具体区别可以查看codepen-webkit-mask-composite属性值演示。理解了这个属性之后，上面的叠加问题就很简单了。只设置重叠的地方就足够了。content{-webkit-mask:radial-gradient(circleat0,#000020px,red0),radial-gradient(circleatright,#000020px,red0);-webkit-mask-composite:源输入|目的地在；/*chrome*/mask-composite:intersect;/*Firefox*/}动态演示如下，这样只显示重叠的地方。您可以查看在线示例codepen优惠券以实现32个圆角。很容易实现4个圆角。只画4个圆圈。也很容易实现content{-webkit-mask:radial-gradient(circleat00,#000020px,red0),radial-gradient(circleatright0,#000020px,red0),radial-gradient（圆圈在0100%，#000020px，红色0），径向渐变（圆圈在右边100%，#000020px，红色0）；/*在4个角各画一个圆圈*/-webkit-mask-composite:source-in|目的地在；/*chrome*/mask-composite:intersect;/*Firefox*/}可以查看在线示例codepen优惠券实现44.优惠券平铺效果上面的例子展示了2个1个圆角和4个圆角的效果，分别画了2个和4个圆。其实这个可以通过平铺来实现，只需要一个圆圈。实现步骤如下：在左边画一个透明的圆。content{-webkit-mask:radial-gradient(circleat20px,#000020px,red0);}将自身的一半向左移动。内容{-webkit-mask:radial-gradient(circleat20px,#000020px,red0);-webkit-mask-position:-20px}/*也可以缩短为*/.content{-webkit-mask:radial-gradient(circleat20px,#000020px,red0)-20px;}效果就出来了，是不是很神奇？实际上，使用的是默认的重复功能。这里可以用一张动图来了解下图红色边框的可视区域范围，就是最终的效果。出于演示目的，视线外的瓷砖是半透明的，移动表示位置变化的过程可以看在线例子codepen优惠券实现同样的原理，4个圆角也可以这样实现。content{-webkit-mask:radial-gradient(circleat20px20px,#000020px,red0);-webkit-mask-position:-20px-20px;}/*也可以简写为*/.content{-webkit-mask:radial-gradient(circleat20px20px,#000020px,red0)-20px-20px;}实现原理演示如下，可以查看在线示例codepen优惠券实现66圆角，需要改变tilesize。.content{-webkit-mask:radial-gradient(circleat20px20px,#000020px,red0);-webkit-mask-position:-20px-20px;-webkit-mask-size:50%;}/*也可以简写为*/.content{-webkit-mask:radial-gradient(circleat20px20px,#000020px,red0)-20px-20px/50%；}实现原理演示如下，可以查看在线示例codepen优惠券实现7如果继续缩小背景图片的尺寸，也可以得到最终的效果。content{-webkit-mask:radial-gradient(circleat10px,#000010px,red0);-webkit-掩码位置：-10px；-webkit-mask-size:100%30px;}/*也可以缩短为*/.content{-webkit-mask:radial-gradient(circleat20px20px,#000020px,red0)-10px/100%30像素；}实现原理演示如下，其实可以查看在线示例codepencouponsfortiling实现85.ReverseHollowOverlay在某些情况下，单层渐变可能无法绘制出非常复杂的图形，这就需要reversehollowing的使用从技术上讲，其实就是上面说的mask合成。让我们在这里使用它并采取上面的实现。content{-webkit-mask:radial-gradient(circleat20px20px,#000020px,red0)-20px-20px/50%;}直接在此基础上做一排小孔。内容{-webkit-mask:radial-gradient(circleat50%,red5px,#00000)50%50%/100%20px,radial-gradient(circleat20px20px,#000020px,red0)-20px-20像素/50%；-webkit-mask-composite：目的地输出；蒙版复合：减去；/*Firefox*/}注意这里使用了-webkit-mask-composite:destination-out，意思是做减法，只显示下面的mask，重合的地方不显示，可以查看在线示例codepen的Coupon实现9两边也可以放，换个位置就行了。内容{-webkit-mask:radial-gradient(circleat5px,red5px,#00000)-5px50%/100%20px,radial-gradient(circleat20px20px,#000020px,red0)-20px-20像素/50%；-webkit-mask-composite：目的地输出；蒙版复合：减去；/*Firefox*/}可以查看在线示例codepen优惠券实现106.Framemask有同学觉得径向渐变写起来太复杂，可以用图片代替吗？其实也是可行的这里所说的bordermask指的是mask-border，它还在W3C草案中，但是有一个替代属性——webkit-mask-box-image的语法和概念与border-image非常相似。border-image请参考这篇文章border-image的正确使用，这里主要是了解用法和作用。content{-webkit-mask-box-image:'maskimage'[
