css制作公章

使用CSS制作公章效果

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

HTML结构

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

CSS样式

.seal {
  width: 200px;
  height: 200px;
  border: 3px solid red;
  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 {
  border: 2px solid red;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: red;
  text-align: center;
  padding: 10px;
}

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

添加文字环绕效果

要实现公章常见的环绕文字效果，可以使用CSS的transform属性：

.seal-text {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: rotate 10s linear infinite;
}

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

制作五角星边框

更复杂的五角星边框可以通过伪元素实现：

.seal:before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border: 2px dashed red;
  border-radius: 50%;
}

响应式调整

为了使公章适应不同尺寸，可以使用CSS变量：

:root {
  --seal-size: 200px;
}

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

最终效果优化

添加轻微的颜色渐变使效果更真实：

.seal {
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,230,230,0.5) 100%);
}

这些CSS技术组合可以创建一个视觉上接近真实公章的网页元素，通过调整尺寸、颜色和文字内容可以满足不同场景需求。