css印章制作

CSS印章制作方法

使用CSS制作印章效果可以通过边框、圆角、文字排列和阴影等属性实现。以下是几种常见的印章样式实现方式：

圆形印章

.seal {
  width: 150px;
  height: 150px;
  border: 3px solid red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: red;
  font-weight: bold;
}

弧形文字排列

.seal-text {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  text-align: center;
  transform: rotate(-10deg);
  font-size: 16px;
}

五角星元素

.star {
  width: 0;
  height: 0;
  color: red;
  position: relative;
  display: block;
  margin: 0 auto;
}

.star:before {
  content: "★";
  font-size: 30px;
}

印章边缘效果

.seal-effect {
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 2px rgba(255, 0, 0, 0.5);
}

完整印章示例代码

<div class="seal seal-effect">
  <div class="seal-text">公司印章</div>
  <div class="star"></div>
  <div class="seal-text" style="bottom: 20px; top: auto;">2023</div>
</div>

注意事项

• 调整width和height属性可以改变印章大小
• 修改border颜色可以改变印章主色调
• 使用多个seal-text元素可以实现多行弧形文字
• 增加box-shadow的模糊值可以增强印章边缘效果
• 适当调整transform: rotate()角度使文字排列更自然

通过组合这些CSS属性和HTML结构，可以创建出各种风格的印章效果，包括圆形公章、方形私章等不同样式。实际应用中可根据具体需求调整参数。