最近在倒騰前端的頁面，在某次的需求中我想要這樣的一個效果——僅顯示INPUT輸入框的下邊框，和我想象的編寫方式不一致，每個標簽都有其對應的默認樣式，不同的瀏覽器也有其不同的渲染方式，當然這些知識現在我還沒有完全掌握，所以，下面簡單記錄一下我采用的一種簡單實現方式以備后用。
1：漸進式實現的代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>僅顯示INPUT標簽的下邊框</title> </head> <body> <input>默認效果<br><hr> <input style="border-left-width:0px">設置左邊框寬度為0<br><hr> <input style="border-top-width:0px">設置上邊框寬度為0<br><hr> <input style="border-right-width:0px">設置右邊框寬度為0<br><hr> <input style="border-bottom-width:0px">設置下邊框寬度為0<br><hr> <input style="border-left-width:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0">設置四邊邊框的寬度全為0<br><hr> <input style="border-left-width:0px;border-top-width:0px;border-right-width:0px;border-bottom-color:black">設置左/上/右邊框的寬度為0，下邊框的顏色為黑色，這是我們想要的效果<br><hr> </body> </html>
2：對比測試的效果
2-1：Firefox瀏覽器的渲染效果
2-2：Chrome瀏覽器的渲染效果
2-3：IE9瀏覽器的渲染效果
3：參考
http://www.w3school.com.cn/css/css_border.asp
4：其他
如果把前端編程比作建房子的話，CSS相關的編程工作就類似於房屋裝修，她的重要性是顯而易見的，同樣的需求風格也有許多不同的實現方式，在這里僅僅簡單記錄了其中的一種簡單實現的方式，如果想掌握更多的實現方式，就去倒騰倒騰吧！畢竟編程比裝修房屋容易多了！