<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd
">
Html代碼
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4. <title>Insert title here</title>
5. <style type="text/css">
6. input {
7. border:0px;
8. background-image:url(images/long-input.png);
9. background-repeat:no-repeat;
10. background-position-x:right;
11. padding-left:3px;
12. padding-right:3px;
13. height:18px;
14. font-size:11px;
15. width:70px;
16. }
17. </style>
18. </head>
19. <body>
20. <form>
21. <input value="Hellokitty"/>
22. </form>
23. </body>
24. </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;同理
也就是說當輸入文字過多的時候，背景圖片隨著左移了，此時設定一個關鍵字屬性background-position-x:right;就可已完成預期的效果了
總結：
使用背景圖片製作圓角框實現機理簡單，但是靈活性不大，因此對於那些需要改變寬高的圓角輸入框來說只能製作多張圖片，靈活性較差，但是對於不需要改變寬高，大小一致的圓角輸入框來說，是一種簡單有效方式。大家也可以分享一下其他的實現方式，比較一下~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
