使用css制作海报

CSS海报设计基础

海报设计需要结合视觉层次、排版和色彩搭配。使用CSS的div容器作为画布，通过position: relative或grid布局构建整体框架。设置width和height时建议使用视口单位（如vw/vh）实现响应式。

.poster {
  width: 80vw;
  height: 120vh;
  margin: 0 auto;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
}

文字排版技巧

主标题使用text-shadow和letter-spacing增强视觉效果，副标题通过::after伪元素添加装饰线。中英文混排时注意line-height差异，中文建议1.6-1.8，英文1.2-1.4。

.title {
  font-family: 'Impact', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  color: #d35400;
  text-transform: uppercase;
}

.subtitle::after {
  content: "";
  display: block;
  width: 30%;
  height: 3px;
  background: currentColor;
  margin: 1em auto;
}

图形元素创作

使用CSS绘制装饰元素时，组合clip-path与transform可创建复杂形状。气泡对话框可通过border-radius和::before伪元素实现。

.bubble {
  width: 150px;
  height: 100px;
  background: #3498db;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-10deg);
}

.bubble::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 30px;
  border-width: 20px 15px 0;
  border-style: solid;
  border-color: #3498db transparent;
}

动态效果增强

通过@keyframes实现微交互，注意使用prefers-reduced-motion媒体查询为动效敏感用户提供替代方案。悬浮效果建议使用transition而非animation。

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.element {
  animation: float 3s ease-in-out infinite;
}

@media (prefers-reduced-motion) {
  .element { animation: none; }
}

印刷优化要点

如需物理打印，使用@media print调整样式。确保所有文字颜色与背景有足够对比度（WCAG AA标准建议4.5:1），关键信息避免依赖色彩传达。

@media print {
  .poster {
    width: 210mm;
    height: 297mm;
    background: white !important;
    -webkit-print-color-adjust: exact;
  }
}