【 tulaoshi.com - Html 】
在网上我们常常看见一些单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣。其实要实现这样的效果并不困难，我们只要用一段简短的CSS代码控制好表单输入框的样式即可。
示例如下： 请输入您的用户名：
下面我们就来看看这段实现效果的css代码。它主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。
<![CDATA[ <style type="text/css"> <!-- .line{ BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none } --> </style> ]]> 样式表中代码解释如下：
“BORDER-LEFT-STYLE:none”： 隐藏左边框
“BORDER-RIGHT-STYLE: none”： 隐藏右边框
“BORDER-TOP-STYLE: none”： 隐藏上边框
“BORDER-bottom-STYLE: none”： 隐藏下边框。
下面让我们一起来看一个应用实例：
<![CDATA[ <html> <head> <title>横线式输入框</title> <style type="text/css"> <!-- .line{ BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none ; } --> </style> <!--注：此段为css代码，你还可以在这里设置出的样式效果--> </head> <body bgcolor="#FFFFFF" text="#000000"> 隐藏的边框的输入框： <p>用户名：<input type="text" name="name" class=line> <!-- 注：class=line 这条语句将你预设的css应用在表单中 --> </p><a href="https://www.tulaoshi.com/html/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）</a> </body> </html> ]]> 实现效果简洁清爽。
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）
