阅读 74

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-repeatbackground-image两个属性合并,效果会乱。(在webstorm中会提示将这两个属性合并,忽略之)。