当前位置：首页 > CSS

css 制作字帖

2026-04-01 13:29:50CSS

使用 CSS 制作字帖

制作字帖可以通过 CSS 实现田字格或米字格效果，并控制字体样式和排版。以下是具体实现方法：

田字格背景

通过 CSS 线性渐变绘制田字格：

css 制作字帖

.practice-sheet {
  background-color: #fff;
  background-image: 
    linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px),
    linear-gradient(#ccc 1px, transparent 1px),
    linear-gradient(90deg, #ccc 1px, transparent 1px);
  background-size: 
    100% 50px,  /* 主横线间距 */
    50px 100%,  /* 主竖线间距 */
    100% 10px,  /* 辅助横线间距 */
    10px 100%;  /* 辅助竖线间距 */
  padding: 20px;
}

米字格背景

使用伪元素和旋转实现米字格：

.mi-grid {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

.mi-grid::before,
.mi-grid::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  left: 0;
}

.mi-grid::before {
  transform: rotate(45deg);
}

.mi-grid::after {
  transform: rotate(-45deg);
}

字体样式控制

设置书法字体和大小：

css 制作字帖

.calligraphy {
  font-family: "楷体", "STKaiti", serif;
  font-size: 48px;
  line-height: 1.5;
  text-align: center;
  color: #333;
}

半透明描红效果

使用绝对定位实现描红字：

<div class="tracing-container">
  <div class="trace-overlay">永</div>
  <div class="trace-content">永</div>
</div>

.tracing-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.trace-overlay {
  position: absolute;
  color: rgba(200, 0, 0, 0.3);
  font-size: 80px;
  z-index: 1;
}

.trace-content {
  position: absolute;
  color: #000;
  font-size: 80px;
  z-index: 2;
}

完整示例

结合以上技术的完整字帖示例：

<div class="practice-book">
  <div class="character-box">
    <div class="trace-overlay">永</div>
    <div class="trace-content">永</div>
  </div>
</div>

.practice-book {
  background-color: #fff;
  background-image: 
    linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px),
    linear-gradient(#ccc 1px, transparent 1px),
    linear-gradient(90deg, #ccc 1px, transparent 1px);
  background-size: 100% 50px, 50px 100%, 100% 10px, 10px 100%;
  padding: 40px;
  font-family: "楷体", serif;
}

.character-box {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.trace-overlay {
  position: absolute;
  color: rgba(200, 0, 0, 0.3);
  font-size: 48px;
  line-height: 1;
}

.trace-content {
  position: absolute;
  color: #000;
  font-size: 48px;
  line-height: 1;
  opacity: 0.7;
}

这些 CSS 技术可以组合使用来创建各种样式的书法练习字帖，通过调整颜色、间距和字体大小可以获得不同的视觉效果。