邮票边框css制作

邮票边框CSS制作方法

使用CSS创建邮票边框效果，主要通过border、border-image和border-radius属性结合实现。以下是几种常见方法：

方法一：虚线边框模拟齿孔

通过border和border-radius组合实现：

.stamp {
  width: 200px;
  height: 150px;
  border: 2px dashed #999;
  border-radius: 10px;
  background-color: #f8f8f8;
  padding: 15px;
}

方法二：自定义border-image

使用SVG或图像创建齿孔效果：

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

方法三：伪元素模拟齿孔

通过:before和:after伪元素创建精细控制：

.stamp {
  position: relative;
  width: 200px;
  height: 150px;
  background: #f8f8f8;
  padding: 20px;
}
.stamp:before {
  content: "";
  position: absolute;
  top: -10px; right: -10px; bottom: -10px; left: -10px;
  border: 2px dashed #999;
  border-radius: 15px;
  z-index: -1;
}

方法四：CSS径向渐变

使用radial-gradient创建圆形齿孔效果：

.stamp {
  width: 200px;
  height: 150px;
  padding: 15px;
  background: 
    radial-gradient(circle at 0 0, transparent 0, transparent 6px, #999 6px, #999 8px, transparent 8px) 0 0,
    radial-gradient(circle at 100% 0, transparent 0, transparent 6px, #999 6px, #999 8px, transparent 8px) 100% 0,
    radial-gradient(circle at 100% 100%, transparent 0, transparent 6px, #999 6px, #999 8px, transparent 8px) 100% 100%,
    radial-gradient(circle at 0 100%, transparent 0, transparent 6px, #999 6px, #999 8px, transparent 8px) 0 100%,
    linear-gradient(#999, #999) center top,
    linear-gradient(#999, #999) center bottom,
    linear-gradient(#999, #999) left center,
    linear-gradient(#999, #999) right center;
  background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-repeat: no-repeat;
}

关键参数调整建议

• 齿孔大小：通过border-radius值控制圆角程度
• 齿孔密度：调整dashed边框的虚线间距或radial-gradient的定位频率
• 边框颜色：修改#999颜色值可改变齿孔颜色
• 内容间距：通过padding控制内容与边框的距离

这些方法可根据实际需求组合使用，方法三和方法四适合需要精确控制齿孔位置的场景，方法一和方法二更简单快捷。