css圆角
用图片：
1，用圆角图片做背景。缺憾是不能自适应宽度和高度，而且需要修改颜色的话就需要修改图片的颜色。
2，用上下两张图片做背景，上面的圆角用一张图片，下面的也用一张图片，可以自适应高度。而宽度就取决于该张图片的宽度。
3，用四张图片。上下左右四个角分别用四张图片，可自适应高度和宽度。
以上讲的三种方法处理图片的时候在图片的外围小三角区域都填充网页的背景色，这样才能显示圆角。
纯CSS实现圆角：
这个就比较不方便，，需要用到CSS中的边框来实现。
我就给出一段代码，你看看。
HTML如下：
<body>
<div class="item">
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>这是圆角内的内容</p>
</body>
CSS如下：
.item{margin:0 10px;
padding:0; //这里只做常规设置，按照你的需要!}
.item p{border:1px solid #000;
border-top-width:0; //上面没有边框
margin:0;}
.item div{height:1px;
overflow:hidden;
border-left:1px solid #000;
border-right:1px solid #000;}
.item .row1{margin:0 5px;
background:#000;}
.item .row2{margin:0 3px;
border:0 2px;}
.item .row3{margin:0 2px;}
.item .row4{margin:0 1px;
height:2px;}
这样就实现了上面的圆角，而要实现上下两面的圆角，我们就需要改造HTML
改为：<body>
<div class="item">
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>这是圆角内的内容</p>
<div class="row4"></div>
<div class="row3"></div>
<div class="row2"></div>
<div class="row1"></div>
</body>
CSS部分需要修改的只有一处，找到
.item p{border:1px solid #000;
border-top-width:0; //上面没有边框
margin:0; }
改为：
.item p{border:o;
border-left:1px solid #000;
border-right:1px solid #000;
margin:0;
}
这样就实现了上下两面的圆边框，可自适应高度和宽度，
在学习和制作的时候要保持头脑清醒，别让众多的DIV弄晕了。
我给出完整的代码，你看看：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.item{margin:0 10px;
padding:0; //这里只做常规设置，按照你的需要!}
.item p{border:o;
border-left:1px solid #000;
border-right:1px solid #000;
margin:0;
}
.item div{height:1px;
overflow:hidden;
border-left:1px solid #000;
border-right:1px solid #000;}
.item .row1{margin:0 5px;
background:#000;}
.item .row2{margin:0 3px;
border:0 2px;}
.item .row3{margin:0 2px;}
.item .row4{margin:0 1px;
height:2px;}
</style>
</head>
<body>
<div class="item">
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>这是圆角内的内容</p>
<div class="row4"></div>
<div class="row3"></div>
<div class="row2"></div>
<div class="row1"></div>
</body>
</html>
