当前位置：首页 > CSS

css3制作印章文字

2026-03-31 21:38:33CSS

使用CSS3制作印章文字效果

要实现印章风格的文字效果，可以通过CSS3的文本阴影、边框半径和变换属性来模拟传统印章的外观。

基础印章样式

.stamp-text {
  font-family: "SimSun", serif; /* 使用衬线字体更接近印章效果 */
  font-size: 24px;
  color: #c33;
  text-shadow: 
    0 0 1px #fff,
    0 0 2px rgba(0,0,0,0.3); /* 创建文字边缘模糊效果 */
  letter-spacing: 2px;
  transform: rotate(-5deg);
}

圆形印章容器

css3制作印章文字

.stamp-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border: 3px solid #c33;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  background-color: rgba(255,255,255,0.9);
}

方形印章变体

.stamp-square {
  padding: 20px;
  border: 2px solid #c33;
  border-radius: 5px;
  transform: rotate(3deg);
  background: linear-gradient(to bottom, 
    rgba(255,255,255,0.9) 0%, 
    rgba(240,240,240,0.9) 100%);
}

文字压印效果

css3制作印章文字

.stamp-impression {
  position: relative;
}
.stamp-impression::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, 
      rgba(0,0,0,0.1) 0%, 
      transparent 70%);
  pointer-events: none;
}

HTML结构示例

<div class="stamp-circle stamp-impression">
  <div class="stamp-text">专用印章</div>
</div>

进阶效果：破损边缘

.stamp-circle.torn {
  position: relative;
  overflow: hidden;
}
.stamp-circle.torn::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: 
    radial-gradient(circle, 
      transparent 60%, 
      #c33 60.5%, 
      transparent 61%);
  background-size: 20px 20px;
  opacity: 0.7;
}

这些CSS技术组合可以创建出各种风格的印章效果，通过调整颜色、大小和旋转角度等参数，可以适应不同的设计需求。