css印章制作

使用CSS制作印章效果

通过CSS可以创建出类似传统印章的视觉效果，包括圆形或方形边框、文字环绕和仿旧效果。以下是几种实现方法：

圆形印章基础样式

.seal {
  width: 150px;
  height: 150px;
  border: 3px solid #c33;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #c33;
  font-family: "SimSun", serif;
  text-align: center;
}

文字环绕效果

使用CSS变换实现印章文字环绕：

.seal-text {
  position: absolute;
  top: 20px;
  transform-origin: center 55px;
}

.seal-text span {
  display: inline-block;
  transform: rotate(calc(var(--i) * 15deg));
}

五角星图案

通过伪元素创建印章中心的五角星：

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

仿旧效果处理

添加不规则的边缘和褪色效果：

.seal {
  box-shadow: 0 0 0 4px rgba(195, 51, 51, 0.3);
  background-image: radial-gradient(
    circle at center,
    transparent 60%,
    rgba(195, 51, 51, 0.1) 100%
  );
}

完整HTML结构示例

<div class="seal">
  <div class="seal-text">
    <span style="--i:1">公</span>
    <span style="--i:2">章</span>
    <span style="--i:3">专</span>
    <span style="--i:4">用</span>
  </div>
</div>

方形印章变体

修改border-radius属性可创建方形印章：

.square-seal {
  border-radius: 5px;
  width: 120px;
  height: 120px;
}

这些CSS技术组合可以创建出各种风格的印章效果，通过调整颜色、尺寸和文字内容可适应不同场景需求。现代CSS还支持混合模式(blend-mode)和滤镜(filter)来实现更复杂的仿旧效果。