css制作明信片

设计明信片布局

使用CSS的width和height属性定义明信片尺寸，通常为国际标准明信片大小（如148mm×105mm）。通过margin: auto实现水平居中，并设置border或box-shadow增加立体感。

.postcard {
  width: 148mm;
  height: 105mm;
  margin: 20px auto;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  background: white;
}

添加背景与图片

利用background-image设置背景图或渐变，或通过<img>标签嵌入图片。使用object-fit控制图片填充方式，border-radius可添加圆角效果。

.postcard-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

排版文字内容

通过padding控制内边距，使用text-align调整对齐方式。自定义字体（如@import导入Google Fonts）和颜色增强视觉效果。

.postcard-text {
  padding: 20px;
  font-family: 'Dancing Script', cursive;
  color: #333;
  text-align: center;
  line-height: 1.6;
}

分隔线与装饰元素

用border-top或伪元素（如::after）创建分隔线，或添加小图标作为装饰。

.divider {
  border-top: 1px dashed #aaa;
  margin: 15px 0;
}

.decorative-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 24px;
  color: #ff6b6b;
}

响应式适配

通过媒体查询调整明信片在小屏幕上的显示比例，确保内容不溢出。

@media (max-width: 600px) {
  .postcard {
    width: 90%;
    height: auto;
    aspect-ratio: 148/105;
  }
}

打印优化

添加@media print规则隐藏无关元素，调整边距以适配纸张打印。

@media print {
  .no-print {
    display: none;
  }
  .postcard {
    box-shadow: none;
    margin: 0;
  }
}

通过以上步骤，可实现一个兼具美观与实用性的CSS明信片设计。