在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣。其实要实现这样的效果并不困难，我们只要用一段简短的css代码控制好表单输入框的样式即可。
示例如下：
请输入您的用户名：
下面我们就来看看这段实现效果的css代码。它主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。
<![CDATA[ <br />
]]>
样式表中代码解释如下：
“border-left-style:none”： 隐藏左边框
“border-right-style: none”： 隐藏右边框
“border-top-style: none”： 隐藏上边框
“border-bottom-style: none”： 隐藏下边框。
下面让我们一起来看一个应用实例：
<![CDATA[ <html><br />
<head><br />
<title>横线式输入框</title><br />
<br />
<!--注：此段为css代码，你还可以在这里设置出其他的样式效果--><br />
</head><br />
<body bgcolor="#ffffff" text="#000000"><br />
隐藏的边框的输入框：<br />
</p>
<p>用户名：<input type="text" name="name" class=line><br />
<!-- 注：class=line 这条语句将你预设的css应用在表单中 --><br />
</p>
<p> </body><br />
</html><br />
]]>
实现效果简洁清爽。
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 特别注意：本站所有转载文章言论不代表本站观点！ 本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。未经允许不得转载：
IDC资讯中心 »
CSS实例：横线样式的输入框-网页设计,HTML/CSS
IDC资讯中心
