最近很火的带图标的搜索框：
现在非常流行就是导航栏到搜索框，看上去略微有那么一点味道是不是！
话入正题：border-radius这个新型的CSS3样式（相对新手而言），它很强大可以让你方形开始圆滑起来。你可以这样理解border是边框的意思，而radius英文翻译是半径范围的意思（当你的border-radius那么就意思就是你的边框圆角的意思对不对！我们现在把英文和学习结合起来这样大家学习会更加的快！）但是radius在计算机领域可就不是那么简单的问题拉，转回整体开始继续我们的样式学习之路，但是border-radius不兼容IE9以下浏览器所以大家一定要注意这个问题；还有苹果、谷歌等一些浏览器都用-webkit-border-radius表示IE9以上的border-radius。说到这里那么火狐大哥不爽了，火狐有着自己独特气质它用的是：-moz-border-radius。
学到这里大家就会写实心与空心圆了，应该能分清楚那个实心那个空心：
.div2{
height:200px;
200px;
border-radius:10px solid #000;
}
.div1{
height:200px;
200px;
bacakgroud-color: red;
border-radius:100px;
}
样式：
.nav-top{100%;height: 50px; .nav-top ul{ 70%;margin-left: 10%}
.nav-top ul li{float: left;color: #fff;105px;list-style-type:none;font-size: 17px;font-weight:bold;text-align: center;}
.nav-top ul li a{float: left;color:#fff;text-decoration: none;padding: 15px 10px 0px 0px;}
.nav-top .line{ float:left;height:20px; 1px; background: #9605AA;margin-top: 15px;margin-right: 20px}
.search-top{float:left;padding-top:13px;margin-left:10%;height:25px; }
.search-top input{height: 23px;line-height: 23px;border-radius: 10px;background: url("./images/search-top.jpg")no-repeat scroll right center transparent;padding-right: 8px;background-color: #fff;}
HTML：
<div class="nav-top">
<ul>
<li><a href=""> 首页</a></li>
<li><div class="line"></div><a href="">时尚生活</a></li>
<li><div class="line"></div><a href="">情感夜话</a></li>
<li><div class="line"></div><a href="">美容形体</a></li>
<li><div class="line"></div><a href="">健康保养</a></li>
<li><div class="line"></div><a href="">名流丽人</a></li>
<li><div class="line"></div><a href="">形象礼仪</a></li>
</ul>
<div class="search-top">
<input type="text" placeholder=" 减肥" />
</div>
</div>