css3制作印章文字

使用CSS3制作印章文字效果

要实现印章文字效果，可以通过CSS3的text-stroke、border-radius和transform等属性模拟印章的圆形边框和文字描边效果。

HTML结构

<div class="seal">
  <span class="seal-text">专用章</span>
</div>

CSS样式

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

.seal-text {
  color: transparent;
  font-size: 36px;
  font-weight: bold;
  -webkit-text-stroke: 2px #f00;
  text-stroke: 2px #f00;
  transform: rotate(-15deg);
}

.seal::before {
  content: "★";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f00;
  font-size: 24px;
}

添加五角星和环形文字

更复杂的印章效果可以包含五角星和环形排列的文字：

<div class="seal-advanced">
  <div class="star">★</div>
  <div class="circle-text">中华人民共和国</div>
</div>

.seal-advanced {
  width: 300px;
  height: 300px;
  border: 8px solid #f00;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.star {
  color: #f00;
  font-size: 60px;
  position: absolute;
}

.circle-text {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 15s linear infinite;
}

.circle-text span {
  position: absolute;
  left: 50%;
  font-size: 24px;
  transform-origin: 0 150px;
  color: #f00;
  font-weight: bold;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

使用SVG实现更精确的印章

对于更专业的印章效果，可以使用SVG：

<svg width="300" height="300" viewBox="0 0 300 300">
  <circle cx="150" cy="150" r="140" fill="none" stroke="red" stroke-width="5"/>
  <path id="textPath" d="M50,150a100,100 0 1,1 200,0a100,100 0 1,1 -200,0"/>
  <text fill="red" font-size="24" font-weight="bold">
    <textPath xlink:href="#textPath" startOffset="50%">· 中华人民共和国 ·</textPath>
  </text>
  <text x="150" y="160" text-anchor="middle" fill="red" font-size="60">★</text>
  <text x="150" y="190" text-anchor="middle" fill="red" font-size="30" font-weight="bold">专用章</text>
</svg>

注意事项

• 文字描边使用text-stroke属性时需注意浏览器兼容性，可能需要添加-webkit-前缀
• 环形文字布局需要精确计算字符间距和位置
• 印章颜色通常使用红色(#f00或#c00)
• 响应式设计时应使用相对单位(如vw/vh)确保印章大小适应不同屏幕

以上方法可根据实际需求组合使用，CSS3方案适合简单印章效果，SVG方案则能实现更复杂精确的印章设计。