当前位置：首页 > CSS

css信件制作

2026-02-13 00:44:17CSS

使用CSS制作信件样式

通过CSS可以模拟传统信件的视觉风格，包括纸张效果、手写字体和装饰元素。以下是实现方法：

基础信件容器样式

.letter {
  width: 80%;
  max-width: 600px;
  margin: 2rem auto;
  padding: 3rem;
  background-color: #f9f5e9;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  position: relative;
  border: 1px solid #e0d5b8;
}

添加信纸纹理效果

.letter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    transparent 95%, 
    rgba(0,0,0,0.05) 96%, 
    transparent 97%);
  background-size: 100% 1.5rem;
  pointer-events: none;
}

信件内容排版

.letter-content {
  font-family: 'Courier New', monospace;
  line-height: 1.5rem;
  color: #333;
}

.letter-header {
  text-align: right;
  margin-bottom: 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

.letter-signature {
  font-family: 'Brush Script MT', cursive;
  font-size: 1.5rem;
  margin-top: 3rem;
}

添加复古效果

.letter {
  background-image: 
    radial-gradient(circle at 50% 50%, 
      rgba(0,0,0,0.1) 1px, 
      transparent 1px);
  background-size: 5px 5px;
  filter: sepia(0.2);
}

响应式调整

@media (max-width: 768px) {
  .letter {
    width: 90%;
    padding: 1.5rem;
  }
}

实现折叠信纸效果

要创建折叠信件的三维效果，可以使用CSS transform属性：

css信件制作

.folded-letter {
  transform: 
    perspective(1000px) 
    rotateY(10deg) 
    rotateX(2deg);
  transform-origin: left center;
  box-shadow: 
    -5px 0 15px rgba(0,0,0,0.1),
    5px 5px 25px rgba(0,0,0,0.2);
}

添加邮票和邮戳元素

.stamp {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 60px;
  height: 80px;
  border: 1px dashed #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #666;
}

.postmark {
  position: absolute;
  top: 1.5rem;
  right: 4rem;
  width: 100px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  transform: rotate(-15deg);
  opacity: 0.7;
}

完整HTML结构示例

<div class="letter folded-letter">
  <div class="stamp">邮票</div>
  <div class="postmark"></div>

  <div class="letter-header">
    <p>2023年11月15日</p>
    <p>致：亲爱的朋友</p>
  </div>

  <div class="letter-content">
    <p>这是一封用CSS制作的电子信件...</p>
  </div>

  <div class="letter-signature">张三</div>
</div>

这些CSS技巧组合可以创建出逼真的信件效果，通过调整颜色、阴影和纹理参数可获得不同风格的视觉呈现。