css实现线条纸张

maliangcoder · maliangcoder · commit 86823c42dc24 · 2023-01-07T23:51:07.000+08:00
diff --git a/常用的CSS主流布局案例(1~8)/30_线条纸张.html b/常用的CSS主流布局案例(1~8)/30_线条纸张.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>线条纸张</title>
+  <style>
+    .container {
+      min-height: 100px;
+      padding: 10px 20px;
+      border: 1px solid #333;
+    }
+    .page {
+      background-image: linear-gradient(#ddd 1px, #fff 0);
+      background-size: 100% 35px;
+      background-position-y: 34px;
+      line-height: 35px;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="page">
+    line1......<br/>
+    ......line 2...... <br/>
+    line 3...... <br/>
+    ......
+  </div>
+</div>
+</body>
+</html>
