HTML中圆角搜索框的实现方法：首先创建一个HTML示例文件；然后创建一个form标签；接着定义好input输入框；最后通过“border-top-left-radius”等属性实现圆角搜索框即可。
本教程 *** 作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
HTML中圆角搜索框怎么做？
非常简单，主要用到CSS中的border属性，代码示例如下：
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title></Title><style> input[type=text] { color: #111; background-color: #c7dec6; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding:20px; }</style></head><body><form action="http://www.baIDu.com/baIDu" target="_blank"> <input type="text" name="word" size="60" style="height: 30px;wIDth: 1100px;background-color: #9a9a9a26;"> <input type="submit" value="搜索" style="border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;padding:20px;height: 60px;wIDth: 80px;margin-left: 30px;background-color: #1591ea;Font-size: large;color: antiquewhite;"></form></body></HTML>运行效果如下：
【推荐：css视频教程】 总结
以上是内存溢出为你收集整理的html中圆角搜索框怎么做全部内容，希望文章能够帮你解决html中圆角搜索框怎么做所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）