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

Question

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

注意:我知道如果我通过使用 javascript 为每个元素创建一个新行来使用表格，这将非常容易，但我正在探索是否有一个仅对文本区域使用 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>