CSS样式文本区域，如笔记本外观
可以设置文本区域的样式，以便每行都有一个虚线下划线（如笔记本或笔记块）？
可以说10的行数应该是固定的。
这可能是你要找的东西：
<style type="text/css"> textarea { background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y; width: 600px; height: 300px; font: normal 14px verdana; line-height: 25px; padding: 2px 10px; border: solid 1px #ddd; } </style> <textarea> Textarea with style example Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line n </textarea> 纯粹的CSS3
<style> html{ height: 100%; } body { background-color: #f5f5f5; } textarea { border: 1px solid #EEEEEE; box-shadow: 1px 1px 0 #DDDDDD; display: block; font-family: 'Marck Script',cursive; font-size: 22px; line-height: 50px; margin: 2% auto; padding: 11px 20px 0 70px; resize: none; height: 689px; width: 530px; background-image: -moz-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #cccccc, #cccccc 43.5%, transparent 0%); -webkit-background-size: 100% 50px; background-size: 100% 50px; } </style>
结果你可以看到这个链接： http : //jsfiddle.net/Wolfsblvt/qc9rgm7r/
如果您对这个主题仍然感兴趣，您可以查看Paper文本区域的示例 – 仅在fivera的博客上用css创build 。 很酷的事情是，你可以玩现场的例子。
这些解决scheme不支持溢出textarea。 所以滚动只滚动文字而不是背景。 为了支持滚动，你应该添加“ background-attachment：local; “到textarea css。
滚动打破每个解决scheme，一个完整的解决scheme，这也应该使线条滚动文字。 这是很难完成的，只需添加一个背景图像到一个textarea。
