当前位置：首页 > CSS

css 制作字帖

2026-02-13 04:52:12CSS

使用 CSS 制作字帖

基础网格布局

通过 CSS 的 background 属性可以创建网格线，模拟传统字帖的方格或田字格效果。以下代码生成田字格样式：

.practice-sheet {
  background: 
    /* 横线 */
    linear-gradient(to bottom, #ccc 1px, transparent 1px),
    /* 竖线 */
    linear-gradient(to right, #ccc 1px, transparent 1px),
    /* 中心十字线 */
    linear-gradient(to bottom, #f00 1px, transparent 1px),
    linear-gradient(to right, #f00 1px, transparent 1px);
  background-size: 
    100% 20px, /* 横线间距 */
    20px 100%, /* 竖线间距 */
    100% 40px, /* 十字横线间距 */
    40px 100%; /* 十字竖线间距 */
}

动态调整格子大小

使用 CSS 变量实现可调节的格子尺寸，便于适配不同练习需求：

css 制作字帖

:root {
  --grid-size: 24px;
  --center-line-color: #ff6b6b;
}

.adjustable-grid {
  background: 
    repeating-linear-gradient(
      to right,
      #ddd 0 1px,
      transparent 1px var(--grid-size)
    ),
    repeating-linear-gradient(
      to bottom,
      #ddd 0 1px,
      transparent 1px var(--grid-size)
    );
  height: 100vh;
}

毛笔书法效果

模拟毛笔字迹的渐变效果，通过文字阴影和颜色渐变实现：

.calligraphy {
  color: transparent;
  background: linear-gradient(to bottom, #333 30%, #999 70%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 
    0 1px 0 rgba(0,0,0,0.3),
    0 -1px 0 rgba(255,255,255,0.2);
  font-family: "KaiTi", "STKaiti", serif;
}

交互式临摹功能

结合 HTML5 Canvas 实现可临摹的字帖：

css 制作字帖

<canvas id="copybook" width="600" height="800"></canvas>

<script>
  const canvas = document.getElementById('copybook');
  const ctx = canvas.getContext('2d');

  // 绘制网格
  function drawGrid() {
    ctx.strokeStyle = '#eee';
    for(let i = 0; i < canvas.width; i += 20) {
      ctx.beginPath();
      ctx.moveTo(i, 0);
      ctx.lineTo(i, canvas.height);
      ctx.stroke();
    }
    for(let j = 0; j < canvas.height; j += 20) {
      ctx.beginPath();
      ctx.moveTo(0, j);
      ctx.lineTo(canvas.width, j);
      ctx.stroke();
    }
  }

  // 绘制示例字符
  ctx.font = '48px STKaiti';
  ctx.fillText('永', 100, 100);
</script>

打印优化样式

添加打印专用的 CSS 规则，确保字帖在纸质上的显示效果：

@media print {
  .print-sheet {
    background-color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .grid-line {
    border-color: #999 !important;
  }
}

完整示例代码

以下是一个可直接使用的 HTML/CSS 组合：

<!DOCTYPE html>
<html>
<head>
<style>
  .chinese-copybook {
    width: 100%;
    height: 100vh;
    background: 
      repeating-linear-gradient(#f0f0f0 0 1px, transparent 1px 100%),
      repeating-linear-gradient(90deg, #f0f0f0 0 1px, transparent 1px 100%);
    background-size: 40px 40px;
    position: relative;
    font-family: "STKaiti", "KaiTi", serif;
  }

  .character-model {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: rgba(0,0,0,0.2);
    pointer-events: none;
  }
</style>
</head>
<body>
  <div class="chinese-copybook">
    <div class="character-model">字</div>
  </div>
</body>
</html>