如何在文本区域中的行之间绘制分隔符

Question

是否可以仅使用 CSS 在 textarea 中的行之间绘制分隔符，如下图所示：

注意：我知道如果我通过使用 javascript 为每个元素创建一个新行来使用 table 这很容易，但我正在探索是否有一个仅使用 CSS 用于文本区域

谢谢，

Answer 1

是的，您可以通过 css 线性渐变来实现。 Demo

css

 textarea {
  height: 80px;
  line-height: 22px;
  background: repeating-linear-gradient(
  0,
  #222,
  #222 1px,
  #333 1px,
  #333 20px
);
 color: #fff; 
}

html

<textarea name="" id="" cols="30" rows="10"></textarea>

如何在文本区域中的行之间绘制分隔符

How to draw separator between lines in textarea

javascript

css

textarea