css3制作印章文字

使用CSS3制作印章文字效果

通过CSS3的transform、border-radius和text-shadow等属性，可以模拟传统印章的文字排列和视觉效果。

基本结构

<div class="seal">
  <span class="seal-text">印章文字</span>
</div>

圆形印章样式

.seal {
  width: 200px;
  height: 200px;
  border: 4px solid #c00;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.seal-text {
  color: #c00;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0,0,0,0.3);
  transform: rotate(-15deg);
}

方形印章实现方法

对于方形印章效果，调整边框样式和文字排列：

.seal-square {
  width: 180px;
  height: 180px;
  border: 3px dashed #c00;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

文字环绕效果

实现传统印章的环形文字排列需要更复杂的处理：

<div class="seal-ring">
  <svg viewBox="0 0 100 100">
    <path id="circlePath" d="M 10,50 A 40,40 0 1,1 90,50 A 40,40 0 1,1 10,50"/>
    <text>
      <textPath xlink:href="#circlePath">环绕排列的印章文字内容</textPath>
    </text>
  </svg>
</div>

印章破损效果

通过伪元素创建自然边缘效果：

.seal::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 
    0 0 10px rgba(0,0,0,0.3),
    inset 0 0 10px rgba(0,0,0,0.1);
}

响应式调整

使用CSS变量便于尺寸调整：

.seal {
  --size: 200px;
  width: var(--size);
  height: var(--size);
}

@media (max-width: 600px) {
  .seal {
    --size: 150px;
  }
}

这些方法组合使用可以创建出各种风格的印章效果，通过调整颜色、边框样式和文字属性可获得不同视觉效果。