将边框添加到文本区域

Question

我需要复制此联系表。

已经完成了，但是我在文本区域遇到了一些问题。

似乎我需要将各种 "hr" 放入文本区域，或者...或者我不知道。欢迎任何帮助。

Answer 1

您需要为 1px by 16px 使用类似于 | 的背景图像，并为背景使用重复：

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

Answer 2

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

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（尝试 increasing/decerasing 缩放系数）而变化。

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

将边框添加到文本区域

Add borders into a textarea

html

css

textarea