优惠券中的凹角和锯齿边

[jerryni]

在开发优惠券组件的过程中，遇到两种复杂的样式，凹角和锯齿边。下面就跟大家讲解一下实现方案。

radial-gradient黑科技

结论就是需要使用radial-gradient（径向渐变）来实现；

从css魔法哥的文章可以理解radial-gradient生成一个圆圈的原理。

渐变两端如果使用相同的颜色就会形成一个色块，并且色值可以是透明值，色值可以设置多项，如下图有4个色值；

深入理解：
先了解一下linear-gradient的渐变原理，2个不同的颜色在某段区间上会生成一段渐变，但是如果这段区间的颜色一样就不会有渐变，而是生成一片颜色块。 就像这样：background: linear-gradient(red 50%, blue 50%, blue) 另一种hack写法background: linear-gradient: red 50%, blue 0; ，这种写法注意点就是后面的值只要比50%小就行了，比如20%，所以设置成0更稳。 这样只会有2种颜色，红色50%, 蓝色50%。transparent也可以作为色值；

radial-gradient同理，不过他是圆形的，同理可以形成一个任意颜色的圆圈。

再扩展到四个角：通过radial-gradient的第一个参数，可以设置圆心的位置为4个角。 可以参考这个demo，这个demo通过内凹角实现了凹角边框。

锯齿边

锯齿边的处理，可以利用border-style: dotted + 绝对定位 + 融合背景颜色来实现，这个方式的缺点就是需要border颜色和背景一致。具体可以参考这篇文章，或这个简化demo

[cssmagic]

锯齿边似乎也可以用 radial-gradient 来实现，可以做到真透明。比如参考《CSS 揭秘》中 “波点图案” 的实现。

[jerryni]

@cssmagic 恩，也试了一下，效果都不大理想，最后在产品的yin威下还是用了切图:alien: