将边框添加到textarea中

Question

我需要重现此联系表单。

已经完成了，但是我遇到了textarea的一些问题。

似乎我需要将各种“hr”放入textarea，或......或者我不知道。 欢迎任何帮助。

Answer 1

您可以使用linear-gradient background-size等于为line-height定义的textarea，例如

http://codepen.io/anon/pen/LELJzy

textarea {
   font-size: 16px;
   width: 80%;
   height: 200px;
   color: #fff;
   line-height: 1.7em;
   background: linear-gradient(to bottom, #000 98%, #fff 98%);
   background-size: 1.7em 1.7em;
}

使用此方法，您不需要额外的背景图像请求，并且线条可能会根据用户font-size改变其位置（尝试增加/减少缩放系数）。

可以调整线条的刻度，定义不同的颜色停止值。

Answer 2

您需要使用1px by 16px的背景图片，它与|类似，并使用repeat作为背景：

textarea{
   background: url(line.jpg) repeat;
}