当前位置：首页 > CSS

邮票边框css制作

2026-01-28 14:18:19CSS

邮票边框CSS制作

邮票边框通常以锯齿状或波浪状边缘为特征，可以通过CSS的border-image、clip-path或mask属性实现。以下是几种常见方法：

使用border-image实现锯齿边框

通过定义锯齿图案的SVG或图片作为边框图像，结合border-image属性实现：

.stamp-border {
  width: 200px;
  height: 150px;
  border: 20px solid transparent;
  border-image: url('锯齿图案.svg') 20 round;
  background-color: #f8f8f8;
}

使用clip-path制作波浪边缘

通过SVG路径或CSS的polygon()函数定义波浪形状：

.stamp-wave {
  width: 200px;
  height: 150px;
  background: #f0f0f0;
  clip-path: polygon(
    0 10%, 5% 0, 10% 10%, 15% 0, 20% 10%,
    25% 0, 30% 10%, 35% 0, 40% 10%, 45% 0,
    50% 10%, 55% 0, 60% 10%, 65% 0, 70% 10%,
    75% 0, 80% 10%, 85% 0, 90% 10%, 95% 0,
    100% 10%, 100% 100%, 0 100%
  );
}

使用mask属性创建穿孔效果

结合CSS的mask-image和径向渐变模拟邮票穿孔：

.stamp-perforated {
  width: 200px;
  height: 150px;
  background: #eaeaea;
  -webkit-mask-image: radial-gradient(
    circle at 0 50%, 
    transparent 0, transparent 4px, #000 4px, #000 5px
  );
  mask-image: repeating-radial-gradient(
    circle, 
    #000 0, #000 5px, transparent 5px, transparent 10px
  );
  mask-size: 10px 10px;
}

伪元素实现简单锯齿

通过::before或::after伪元素创建重复的三角形：

.stamp-simple {
  position: relative;
  width: 180px;
  height: 120px;
  background: #fff;
  outline: 2px dashed #ccc;
}
.stamp-simple::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    #fff 5px,
    #fff 10px
  );
}

注意事项：