当前位置：首页 > CSS

邮票边框css制作

2026-04-01 17:30:02CSS

邮票边框CSS制作方法

使用CSS的border和border-image属性可以模拟邮票的锯齿边缘效果。以下是几种常见实现方式：

使用border-image属性

通过SVG或PNG图像创建锯齿边缘，并应用为边框图像：

邮票边框css制作

.stamp-border {
  border: 12px solid transparent;
  border-image: url('stamp-edge.png') 12 round;
  padding: 10px;
}

纯CSS径向渐变实现

利用多个径向渐变创建小圆点效果：

.stamp-dots {
  position: relative;
  padding: 15px;
  background: white;
}

.stamp-dots::before {
  content: "";
  position: absolute;
  inset: -5px;
  background: 
    radial-gradient(circle at 0 0, transparent 0, transparent 70%, black 70%, black 72%, transparent 72%) 0 0,
    radial-gradient(circle at 100% 0, transparent 0, transparent 70%, black 70%, black 72%, transparent 72%) 100% 0,
    radial-gradient(circle at 0 100%, transparent 0, transparent 70%, black 70%, black 72%, transparent 72%) 0 100%,
    radial-gradient(circle at 100% 100%, transparent 0, transparent 70%, black 70%, black 72%, transparent 72%) 100% 100%;
  background-size: 20px 20px;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
  mask-composite: exclude;
  padding: 5px;
}

使用box-shadow模拟

通过多个小圆点的box-shadow创建边缘：

邮票边框css制作

.stamp-shadow {
  position: relative;
  padding: 20px;
  box-shadow: 
    0 0 0 10px white,
    0 0 0 11px black,
    0 0 0 20px white;
}

.stamp-shadow::before {
  content: "";
  position: absolute;
  top: -10px; left: -10px; right: -10px; bottom: -10px;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 19px,
    black 19px,
    black 20px
  );
  z-index: -1;
}

使用clip-path创建锯齿

SVG clip-path可以实现更精确的邮票边缘：

.stamp-clip {
  clip-path: url(#stamp-clip);
  padding: 15px;
  background: white;
}

对应的SVG定义：

<svg width="0" height="0">
  <defs>
    <clipPath id="stamp-clip" clipPathUnits="objectBoundingBox">
      <path d="M0,0.1 L0.05,0.05 L0.1,0.1 L0.15,0.05 L0.2,0.1 ..." />
    </clipPath>
  </defs>
</svg>

这些方法可以根据具体需求选择，border-image方法最适合复杂图案，而纯CSS方法则无需额外图像资源。调整参数可以控制锯齿的大小和密度。