使用css制作海报

CSS海报设计基础

使用CSS设计海报需要结合布局、颜色、字体和视觉效果。Flexbox或Grid布局适合构建海报的整体结构，确保元素排列有序。

设置海报尺寸时，固定宽度和高度更易控制。例如A4尺寸的海报可定义为width: 210mm; height: 297mm。使用margin: auto实现水平居中。

背景与颜色方案

线性渐变或径向渐变能创建动态背景。例如：

background: linear-gradient(45deg, #ff9a9e, #fad0c4);

颜色方案应保持协调，使用工具如Adobe Color提取配色。高对比度文本颜色确保可读性，例如深色背景配浅色文字。

排版与字体嵌入

标题使用@font-face引入自定义字体：

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
}
h1 { font-family: 'CustomFont', sans-serif; }

正文文字行高建议1.5倍，例如line-height: 1.5。文本阴影增强立体感：

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

图形与装饰元素

CSS绘制简单图形替代图片加载。三角形示例：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff6b6b;
}

伪元素添加装饰线条：

.decor::after {
  content: "";
  display: block;
  width: 80%;
  height: 2px;
  background: gold;
  margin: 10px auto;
}

响应式与打印优化

媒体查询适配不同屏幕：

@media (max-width: 768px) {
  body { font-size: 14px; }
}

打印样式隐藏非必要元素：

@media print {
  .no-print { display: none; }
}

关键技巧包括使用vh/vw单位适应视口，object-fit控制图片比例，以及CSS变量统一管理设计参数。