Question

html中如何将搜索框的四个角设置成圆的

原图为我做的是

我的html代码为<div class="top2b"> <input type="text" value="请输入搜索关键字" id="input" /> <input type="submit" value="搜索" id="buttom" /> </div>
我的css代码为#input{ width:235px; height:25px; color:#666666; line-height:25px; border:1px #cccccc solid; border-radius:18px; margin-top:25px; margin-left:79px; } #buttom{ width:66px; height:23px; border:solid #ac1929; border-radius:18px; background-color:#ac1929; color:white; }
怎么把搜索框的四个角设置为圆的，变成原图那样？大神求解啊！！！！！





Answer 1

要是要兼容ie的话，必须是用图片。
要是不考虑ie的话
直接写代码就好了。在css中写：-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;

Answer 2

直接画个圆角图片做背景，上面放input框
< input type="text" style="border:none; background:none;outline:none; " />

把input框隐掉

Answer 3

就用border-radius属性就行，但是不支持ie老版本；

另外有两个在线插件可以帮你解决背景图渐变（不支持ie6/7/8）：

CSS3 Generator

--------- 可定制性非常高的一款 CSS3 代码生成工具，有边框圆角、阴影、背景渐变和透明效果。

Gradient Editor
--------- 来自 ColorZilla 的非常强大的 CSS 渐变编辑工具，类似 Photoshop 中的渐变功能。

Answer 4

作为背景图出现