對應的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Html代碼
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- <style type="text/css">
- input {
- border:0px;
- background-image:url(images/long-input.png);
- background-repeat:no-repeat;
- background-position-x:right;
- padding-left:3px;
- padding-right:3px;
- height:18px;
- font-size:11px;
- width:70px;
- }
- </style>
- </head>
- <body>
- <form>
- <input value="Hellokitty"/>
- </form>
- </body>
- </html>
實現思路如下：
1.使用border:0px;去掉input框默認的邊框
2.制作一個圓角的輸入框，並設定為input的背景圖片並且設定background-repeat:no-repeat;以不讓背景圖片重復
3.由於是使用固定的背景制作圓角，因此需要設定固定的height:18px;font-size:11px;font-size:11px;
此時的效果圖：
4.發現輸入框中的內容壓在了左邊的背景圖片上，因此使用padding-left:3px;使內容有一定的左邊距padding-right:3px;同理
此時基本完成整個制作，但在IE下輸入字符多的情況下出現:
也就是說當輸入文字過多的時候，背景圖片隨着左移了，此時設置一個關鍵字屬性background-position-x:right;就可已完成預期的效果了
總結：
使用背景圖片制作圓角框實現機理簡單，但是靈活性不大，因此對於那些需要改變寬高的圓角輸入框來說只能制作多張圖片，靈活性較差，但是對於不需要改變寬高，大小一致的圓角輸入框來說，是一種簡單有效的方式。
注釋：直接在input里面設置樣式，制作一個與之大小相同的文本框也可以實現，而且更加簡單。
<td><input type="text" style="height:35px;width:100%; border: 1px solid #bbb;
border-radius: 10px;" ></td>