css古诗制作

使用CSS制作古诗效果

通过CSS可以创建优雅的古诗排版效果，包括竖排文字、传统风格边框和背景等。以下是几种实现方法：

竖排文字效果

.poem-vertical {
  writing-mode: vertical-rl;
  font-family: "SimSun", "宋体", serif;
  line-height: 2;
  letter-spacing: 0.5em;
  padding: 20px;
  background-color: #f8f3e6;
}

传统卷轴样式

.poem-scroll {
  border: 8px double #8B4513;
  border-image: url('scroll-pattern.png') 30 round;
  padding: 30px;
  background: linear-gradient(to right, #f5e8c9, #f0e0b6);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

印章效果

.seal {
  display: inline-block;
  padding: 5px 10px;
  background-color: #c33;
  color: white;
  transform: rotate(-15deg);
  font-family: "KaiTi", "楷体", cursive;
  border-radius: 2px;
}

完整示例代码

<div class="poem-container">
  <div class="poem-vertical">
    <h3>静夜思</h3>
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
    <div class="seal">李白</div>
  </div>
</div>

.poem-container {
  display: flex;
  justify-content: center;
  margin: 50px auto;
}

.poem-vertical {
  writing-mode: vertical-rl;
  font-family: "KaiTi", "楷体", serif;
  font-size: 24px;
  line-height: 2;
  letter-spacing: 0.5em;
  padding: 40px 20px;
  background-color: #f8f3e6;
  border-right: 2px solid #8B4513;
}

.seal {
  display: inline-block;
  padding: 5px 10px;
  background-color: #c33;
  color: white;
  transform: rotate(-15deg);
  font-family: "KaiTi", "楷体", cursive;
  border-radius: 2px;
  margin-top: 20px;
}

增强效果技巧

添加传统纹理背景

background: url('rice-paper-texture.jpg') repeat;

使用传统字体

font-family: "STKaiti", "华文楷体", "KaiTi", "楷体", serif;

创建毛笔字效果

text-shadow: 
  1px 1px 0px rgba(0,0,0,0.3),
  -1px -1px 0px rgba(255,255,255,0.3);

添加动画效果

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.poem-vertical {
  animation: fadeIn 2s ease-in-out;
}