邮票边框css制作

邮票边框的CSS实现方法

邮票边框通常以锯齿状或穿孔效果为特征，可以通过CSS的border-image属性或伪元素结合背景渐变实现。以下是几种常见方法：

使用border-image属性

通过SVG或PNG图像创建邮票边缘效果，并应用到边框：

.stamp {
  width: 200px;
  height: 150px;
  border: 20px solid transparent;
  border-image: url('stamp-border.png') 20 round;
  padding: 10px;
  background-color: white;
}

使用伪元素和径向渐变

通过CSS径向渐变模拟穿孔效果（无需外部图像）：

.stamp {
  position: relative;
  width: 200px;
  height: 150px;
  background: white;
  padding: 15px;
}

.stamp::before {
  content: "";
  position: absolute;
  top: -10px; right: -10px; bottom: -10px; left: -10px;
  background: 
    radial-gradient(circle at 0 0, transparent 0, transparent 70%, white 70%) 0 0,
    radial-gradient(circle at 100% 0, transparent 0, transparent 70%, white 70%) 100% 0,
    radial-gradient(circle at 100% 100%, transparent 0, transparent 70%, white 70%) 100% 100%,
    radial-gradient(circle at 0 100%, transparent 0, transparent 70%, white 70%) 0 100%;
  background-size: 20px 20px;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
  z-index: -1;
}

使用clip-path创建锯齿边缘

通过多边形裁剪路径实现简单锯齿效果：

.stamp {
  width: 200px;
  height: 150px;
  background: white;
  clip-path: polygon(
    0% 10px, 10px 0%,
    calc(100% - 10px) 0%, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0% calc(100% - 10px)
  );
  padding: 15px;
}

结合box-shadow增强立体感

为邮票添加投影效果增强真实感：

.stamp {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  /* 其他样式同上 */
}

实际应用中可根据需求调整锯齿大小、密度和颜色。对于更复杂的效果，建议使用SVG作为边框图像源或背景图案。