css制作公章

2026-03-11 16:57:10CSS

使用CSS制作公章效果

通过CSS的border-radius、box-shadow和渐变等属性可以模拟公章外观。以下是一个完整的实现方案：

<div class="seal">
  <div class="seal-inner">专用章</div>
  <div class="seal-star">★</div>
</div>

.seal {
  width: 200px;
  height: 200px;
  border: 4px solid #f00;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.seal-inner {
  font-size: 24px;
  font-weight: bold;
  color: #f00;
  text-align: center;
  transform: rotate(-15deg);
}

.seal-star {
  position: absolute;
  font-size: 40px;
  color: #f00;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

添加文字环绕效果

要实现公章外圈的环绕文字，可以使用CSS的transform属性：

<div class="seal-ring">
  <span>中华人民共和国</span>
  <span>电子公章</span>
</div>

.seal-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.seal-ring span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #f00;
  text-align: center;
  transform-origin: center;
}

.seal-ring span:nth-child(1) {
  transform: rotate(0deg);
}

.seal-ring span:nth-child(2) {
  transform: rotate(180deg);
}

制作五角星图案

纯CSS实现五角星（替代unicode字符）：

.seal-star-css {
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f00;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-bottom: 50px solid #f00;
}

.seal-star-css:before {
  content: "";
  position: absolute;
  top: 15px;
  left: -30px;
  width: 0;
  height: 0;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-top: 50px solid #f00;
}

增加印章压痕效果

通过多重阴影和半透明效果增强真实感：

.seal-realistic {
  box-shadow: 
    0 0 5px rgba(255, 0, 0, 0.8),
    0 0 10px rgba(255, 0, 0, 0.6),
    0 0 15px rgba(255, 0, 0, 0.4);
  opacity: 0.9;
  background: radial-gradient(
    circle, 
    transparent 60%, 
    rgba(255, 0, 0, 0.2) 100%
  );
}

响应式调整

添加媒体查询使公章适应不同屏幕：

css制作公章

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

  .seal-inner {
    font-size: 18px;
  }

  .seal-star {
    font-size: 30px;
  }
}

以上代码组合可以创建一个逼真的CSS公章效果，包含圆形边框、中央五角星、环绕文字和压痕效果。可根据实际需求调整颜色、尺寸和文字内容。