css 图片圆角输入框

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




总结:


使用背景图片制作圆角框实现机理简单,但是灵活性不大,因此对于那些需要改变宽高的圆角输入框来说只能制作多张图片,灵活性较差,但是对于不需要改变宽高,大小一致的圆角输入框来说,是一种简单有效的方式。大家也可以分享一下其他的实现方式,比较一下~

你可能感兴趣的:(html,css,url,input,border)