（重点：background-image: repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background: #CCCCCC;
}
.page{
width: 21.7cm;
min-height: 29cm;
margin: 20px auto;
line-height: 44px;
background-image: -webkit-repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);
background-image: repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);
}
</style>
</head>
<body>
<div class="page" contenteditable>
这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字
</div>
</body>
</html>
效果：
代码解释：通过背景进行线性渐变（linear-gradient）以达到稿纸效果；
说明：repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%)，3.8%与4%之间就是线条的宽度，但是这样做出来的有缺陷，
这种线条并不能随内容增多而保持原有的线与线的距离。如下图：
（将百分比换为像素，41px-44px可自己调节线与线的距离以及线的高度background-image: repeating-linear-gradient(#ffffff,#ffffff 41px,#000 44px);）
这样就可以达到预期效果了。
