CSS实例：横线样式的输入框
日期：2013-11-07 浏览次数：21500 次
示例如下：
请输入您的用户名：
下面我们就来看看这段实现效果的css代码。它次要运用了表格边框的款式控制，将左、上、左边框设置为none，只剩下下边框即可。
<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”： 隐藏下边框。
下面让我们一同来看一个使用实例：
<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>
</body>
</html>
实现效果简约清新。
