CSS例項：橫線樣式的輸入框
阿新 • • 發佈：2019-02-11
在網上我們常常看見一些登錄檔單的輸入框部分並不是我們常見的矩形框，而是一條細線，很多朋友對此很感興趣。其實要實現這樣的效果並不困難，我們只要用一段簡短的CSS程式碼控制好表單輸入框的樣式即可。
示例如下：
請輸入您的使用者名稱：
下面我們就來看看這段實現效果的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>使用者名稱：<input type="text" name="name" class=line> <-- 注：class=line 這條語句將你預設的css應用在表單中 --> </p> </body> </html>
實現效果簡潔清爽。
示例如下：
請輸入您的使用者名稱：
下面我們就來看看這段實現效果的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>使用者名稱：<input type="text" name="name" class=line> <-- 注：class=line 這條語句將你預設的css應用在表單中 --> </p> </body> </html>
實現效果簡潔清爽。