带图标的搜索框 border-radius详解

最近很火的带图标的搜索框：

现在非常流行就是导航栏到搜索框，看上去略微有那么一点味道是不是！

话入正题：border-radius这个新型的CSS3样式（相对新手而言），它很强大可以让你方形开始圆滑起来。你可以这样理解border是边框的意思，而radius英文翻译是半径范围的意思（当你的border-radius那么就意思就是你的边框圆角的意思对不对！我们现在把英文和学习结合起来这样大家学习会更加的快！）但是radius在计算机领域可就不是那么简单的问题拉，转回整体开始继续我们的样式学习之路，但是border-radius不兼容IE9以下浏览器所以大家一定要注意这个问题；还有苹果、谷歌等一些浏览器都用-webkit-border-radius表示IE9以上的border-radius。说到这里那么火狐大哥不爽了，火狐有着自己独特气质它用的是：-moz-border-radius。

学到这里大家就会写实心与空心圆了，应该能分清楚那个实心那个空心：

.div2{

                     height:200px;

                      width:200px;

       border-radius:10px solid #000;

}

.div1{

                     height:200px;

                      width:200px;

bacakgroud-color:    red;

      border-radius:100px;

}

样式：

.nav-top{width:100%;height: 50px;background-color: #5D0269}
    .nav-top ul{width: 70%;margin-left: 10%}
    .nav-top ul li{float: left;color: #fff;width: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;width: 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>