おそらく、「罫線入りの紙」効果でそれを偽造することができます. これがそのような結果の 1 つです: http://css3.wikidot.com/blog:lined-paper-with-css
元のサイトが移動またはダウンした場合に備えて、ここにコピーして保存します。
この手法は非常に単純です。必要なのは、紙全体に線の効果を与える背景グラデーションの繰り返しと、罫線の余白を与える左側の疑似要素だけです。
.paper {
font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
width: 300px;
margin: 0 auto 10px;
padding: 6px 5px 4px 42px;
position: relative;
color: #444;
line-height: 20px;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
-ms-background-size: 100% 20px;
-o-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.paper::before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
すべてのテキストを行に正しく配置するには、すべてのテキスト要素のマージンと行の高さを明確に宣言する必要があります。上で 20 ピクセルの背景サイズを使用した場合 (つまり、行間が 20 ピクセル)、20 ピクセルの行の高さ (または同等の行の高さ + マージン) を使用する必要があります。
.paper h1,
.paper h2 {
font-size: 16px;
line-height: 16px;
margin: 0 0 4px;
}
.paper h3,
.paper h4,
.paper h5 {
font-size: 14px;
line-height: 16px;
margin: 0 0 4px;
}
.paper h4,
.paper h5 {
font-weight: normal;
}
.paper p {margin: 0 0 20px;}
.paper p:last-child {margin: 0;}
.paper ul {margin: 0 0 20px;}
ブラウザのサポート
これは Webkit と Opera で完全に機能し、Firefox でもほぼ完全に機能します (左側の罫線の余白は一方の端で 1 ピクセル短すぎます)。理論的には IE10 で動作するはずですが、テストしていません。