<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#search").click(function () {
$("#load").fadeIn("slow")
})
})
</script>
</head>
<body>
<div id="load" style="display: none">
<img alt="waiting..." src="images/wait.gif" />
加载中,请稍等...
</div>
<input id="search" type="button" value="查询" />
</body>
</html>
其实很简单，圆角它靠1px的高度来拼起来的比如：
大层div宽度为100px
圆角开始：上
第一行div，高度为1px宽度为94px左右两边挤开3px，
第二行div，高度为1px宽度为96px左右两边挤开2px，
第二行div，高度为1px宽度为98px左右两边挤开1px，
第四行DIV： 内容
圆角开始：下
第一行div，高度为1px宽度为98px左右两边挤开1px，
第二行div，高度为1px宽度为96px左右两边挤开2px，
第二行div，高度为1px宽度为94px左右两边挤开3px，
两边的边距自定，这样就形成一个狐形了。
随便写几个例子，写的三种方法都是一样的效果，就是给你一个思路，能达成效果就行或者根据具体情况而定
<style type="text/css">.fangxing01{ float:left width:200px height:200px padding:50px background:blue box-sizing:border-box margin-right:10px}
.yuanxing01{ float:left width:100px height:100px border-radius:50px background:red}
.fangxing02{ float:left width:200px height:200px background:blue margin-right:10px}
.yuanxing02{ float:left width:100px height:100px margin:50px border-radius:50px background:red}
.fangxing03{ position:relative float:left width:200px height:200px background:blue}
.yuanxing03{ position:absolute left:50px top:50px width:100px height:100px border-radius:50px background:red}
</style>
</head>
<body>
<div class="fangxing01">
<div class="yuanxing01"></div>
</div>
<div class="fangxing02">
<div class="yuanxing02"></div>
</div>
<div class="fangxing03">
<div class="yuanxing03"></div>
</div>
</body>
