html - <textarea> 带水平线

Question

有谁知道在 <textarea> 中创建水平线的方法吗？不使用背景图片？

CSS3 就可以了。如有必要，我可以避开 IE 的图像后备。

例子:

Answer 1

您可以使用线性渐变来做到这一点:

.notes {
    background-attachment: local;
    background-image:
        linear-gradient(to right, white 10px, transparent 10px),
        linear-gradient(to left, white 10px, transparent 10px),
        repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    line-height: 31px;
    padding: 8px 10px;
}

<textarea class="notes"></textarea>

JSFiddle Version