css怎样制作这种邮票下边框锯齿效果啊？

Question

红色箭头指向的底部，有个类似邮票打孔锯齿半透明效果。

这种用css是怎么做出来的。做了好久还是弄不出来，好笨。

Answer 1

我看到的第一反应是：渐变。学习参考《CSS 揭秘》。

<div></div>

div {
  width: 500px;
  height: 500px;
  background-color: #099;
  background-image: radial-gradient(#fff 50%, #0000 0);
  background-size: 50px 50px;
  background-position: left bottom -25px;
  background-repeat: repeat-x;
}

Answer 2

https://segmentfault.com/a/1190000016510482

Answer 3

background: radial-gradient(circle at bottom, red 0, red 10px, transparent 0);
 background-size: 40px;

Answer 4

可以参考这篇文章：https://segmentfault.com/a/11...，CSS实现优惠券的相关技巧

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px; 
}

我还专门做了一个快速生成工具：https://segmentfault.com/a/11...