浏览 16300 次
|
锁定老帖子 主题：css 圆角 输入框
精华帖 (0) :: 良好帖 (0) :: 新手帖 (17) :: 隐藏帖 (5)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-12-21
前一段时间，项目主要集中于前端页面的开发，对于Css样式也学习了很多，其中有一项就是制作一个圆角输入框： 对应的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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; 此时的效果图：
此时基本完成整个制作，但在IE下输入字符多的情况下出现:
总结： 使用背景图片制作圆角框实现机理简单，但是灵活性不大，因此对于那些需要改变宽高的圆角输入框来说只能制作多张图片，灵活性较差，但是对于不需要改变宽高，大小一致的圆角输入框来说，是一种简单有效的方式。大家也可以分享一下其他的实现方式，比较一下~
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-12-23
实际应用中真的会这样去实现吗（提供一个定长的背景图）？ 就这个输入框的长度问题已经是一个很致命的地方。实际应用中是不是应该由几张背景图去实现会好一点？譬如有圆角的背景图，和直线的背景图
|
| 返回顶楼 | |
|
发表时间：2009-12-23
最后修改：2009-12-23
ff,chrome,safari下面可以用圆角边框来实现，IE下面还是用背景比较好
input {
height:18px;
inline-height:18px;
font-size:11px;
width:70px;
text-align:center;
border:#ccc 1px solid;
border-radius: 5px; /* css 3标准 */
-moz-border-radius: 5px; /* mozilla */
-webkit-border-radius: 5px; /* webkit */
}
|
| 返回顶楼 | |
|
发表时间：2009-12-23
最后修改：2009-12-23
引用 实际应用中是不是应该由几张背景图去实现会好一点？譬如有圆角的背景图，和直线的背景图
确实应该如此，这样更灵活，适用的场景更广泛。但一个最现实的问题是，背景图片该如何制作？或者说是不是还要另外再去掌握一种图片制作的技能？感觉这不是个简单的问题。 |
| 返回顶楼 | |
|
发表时间：2009-12-23
还有比这更吃饱了撑的事吗？
|
| 返回顶楼 | |
|
发表时间：2009-12-23
为什么要圆角框呢？ 是国内的项目吗？客户要求的吗？
|
| 返回顶楼 | |
|
发表时间：2009-12-24
感觉还是比较好实现的吧，有很多方法啊。
|
| 返回顶楼 | |
|
发表时间：2010-02-03
最后修改：2010-02-03
可以用border-image + background-color实现，对任意大小的都可以用。
效果如下: 
不过背景色填充的时候我不知道怎么填充的。 具体请看:http://www.iteye.com/problems/35557 |
| 返回顶楼 | |
