看了老大的博客。总结一下学到的知识
今天看了老大的博客。www.cnblogs.com/wmw1989
本来感觉如果不加入图片不可能实现圆角效果，一共有三种方法，现在看懂了其中一种。总结如下：
源码：
<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" c>
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
总结下下：
本方法就是通过在上下边际建立div来控制圆角的形成的
在顶部和底部分别建立几个div，高度为一个像素。然后通过设置div的外边距来形成圆角效果
外边距右上及下逐次递增。下外边距至此递减。然后圆角效果就呈现出来了。
外边距知识小结：助记方法：四个参数是就是上顺（从上开始，上右下左）三个时上 左右 下 两个时 上下 左右 一个时 四方面
margin:10px 5px 15px 20px;
- 上外边距是 10px
- 右外边距是 5px
- 下外边距是 15px
- 左外边距是 20px
例子 2
margin:10px 5px 15px;
- 上外边距是 10px
- 右外边距和左外边距是 5px
- 下外边距是 15px
例子 3
margin:10px 5px;
- 上外边距和下外边距是 10px
- 右外边距和左外边距是 5px
例子4
margin: 23px;上下左右外边距均为23px
