回答
您可以使用以下方法:
HTML:
<textarea class="paperlines"></textarea>
CSS:
.paperlines
{
background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
background-size: 100% 100%, 100% 100%, 100% 31px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 31px;
font-family: Arial, Helvetica, Sans-serif;
padding: 8px;
width:300px;
height:500px;
}
.paperlines:focus
{
outline: none;
}
的jsfiddle例如:http://jsfiddle.net/jagmitg/7kteksez/
编辑:添加了另一个例子,共创美好的滚动方法
添加以下到paperlines
类
http://jsfiddle.net/jagmitg/7kteksez/1/
background-attachment: local;
当它滚动时,行应遵循,而不是? – 2014-09-06 14:47:55
行应该按照文本 – user3758257 2014-09-06 14:49:59
@ user3758257更新我的答案 – jagmitg 2014-09-06 15:03:52
创建像一个线图像使用一些基本的图像工具,并将其添加为background
到文本区域
添加CSS:
textarea {
background: url('path of image') repeat-y;
}
注:使图像的高度相应字体你要在文本区域使用
希望它有帮助
- 1. 在texarea中创建和使用标记添加模板
- 2. Javascript - 在html表中添加多个行
- 3. 添加行HTML表
- 4. TexArea中的Java AWT换行符
- 5. 发送HTML Texarea内容到XML文件
- 6. 在数据表中添加html标记添加行
- 7. jquery没有将文本附加到texarea
- 8. 一旦用户添加文字,Javascript按钮不再写入texarea
- 9. 在html中添加跨域
- 10. 在Html中添加值
- 11. 在DataTextFormatString中添加html
- 12. 在Javascript中添加html
- 13. 在HTML中添加条件
- 14. 在html中添加列
- 15. 在html中添加空格
- 16. 将行添加到html表
- 17. jquery添加/删除html行
- 18. Html添加行号到textarea
- 19. Javascript未执行添加html
- 20. HTML - 表,添加行,EditingRow
- 21. 如何在jQuery中使用.html()添加添加HTML元素
- 22. 使用HTML敏捷包在HTML源代码中添加换行
- 23. 如何在换行后添加html?
- 24. 没有行动态添加行HTML表
- 25. 文本位于texarea中的按钮下
- 26. 在添加到XUL中的Html文档中动态添加Html元素
- 27. 在HTML中的文本框中添加多行
- 28. HTML Table在一行的底部添加空格。 [HTML]
- 29. HTML和Javascript(正在添加)
- 30. 添加侦听器以在闭包中动态添加HTML?
你定位了哪些浏览器?你只打算只支持html5 + css3或者css2 + html4 – 2014-09-06 14:41:18
只支持Chrome,所有版本的html和css都支持 – user3758257 2014-09-06 14:42:41
你有没有考虑过使用图片背景? – 2014-09-06 14:43:28