css实现圆形锯齿边效果

话无多说，先看效果。

在线预览 此处借用background-image: radial-gradient()实现锯齿效果，重点在于通过径向渐变radial-gradient去生成白色的圆缺。 radial-gradient支持分段设置每段的色值，每段色值后面跟着一个可选的停止位置，支持%和px。如：

{
  height: 100px;
  width: 100px;
  background-image: radial-gradient(red 25%, yellow 50%, green 75%);
}

效果如下：

发散一下，将前后两个色值设置为一样的，这样就可得到一个的圆环。如：

{
  height: 100px;
  width: 100px;
  background-image: radial-gradient(red 25%, yellow 25%, yellow 50%, green 50%, green 75%);
}

改变后的效果如下：

至此，如何生成白色的圆缺就很明确了。 圆形锯齿边效果完整代码如下：

<div class='ticket'></div>

.ticket {
  width: 300px;
  height: 180px;
  position: relative;
  background: red;
  margin: 0 auto;
}
.ticket:before,
.ticket:after {
  content: '';
  display: block;
  width: 30px;
  height: 100%;
  background-size: 30px 30px; /* 一个repeat的大小 */
  background-repeat: repeat-y;
  background-image: radial-gradient(#fff 8px, transparent 8px);
  position: absolute;
  top: 0;
}
.ticket:before {
  left: -15px; /* 半圆，只显示一个repeat的一半 */
}
.ticket:after {
  right: -15px; 
} 

观察效果图可以看到，每个圆缺和凸起的高度相近，所以白色渐变的停止位置应为一个repeat的1/4左右，剩余的部分会用最后一个色值去填充，此处用了透明色transparent，这样无论元素的背景怎么变化都能很好的适用。 注：不能将background-repeat和background-image两个属性合并，效果会乱。（在webstorm中会提示将这两个属性合并，忽略之）。