css 圖片圓角輸入框

來源:互聯網
上載者:User

<!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;就可已完成預期的效果了

總結:

使用背景圖片製作圓角框實現機理簡單,但是靈活性不大,因此對於那些需要改變寬高的圓角輸入框來說只能製作多張圖片,靈活性較差,但是對於不需要改變寬高,大小一致的圓角輸入框來說,是一種簡單有效方式。大家也可以分享一下其他的實現方式,比較一下~

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.