CSS制作圆角边框

时间：2015-01-29 09:58:07 　来源：免费模板网　作者：风雪　阅读次数　tagsCSS实现圆角边框

网站里面通常使用的圆角效果，那是怎么实现的呢？

前面我们给出了CSS3实现DIV圆角代码，但是不是很全面，只给出了重要的CSS实现代码，下面的例子就是最全面了：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS2实现圆角边框</title>
<style type="text/css">
.round {
width:200px;
left:100px;
top:100px;
position:absolute;
background:none;
overflow:none;
}
.round_conner {
background:none;
overflow:none;
}
.round_body {
height:190px;
background:#abc;
overflow:none;
}
.round_body_contain {
padding:10px;
}
.l1, .l2, .l3, .l4 {
font-size:0;
height:1px;
overflow:none;
width:auto;
background:#abc;
clear:both;
}
.l1 {
margin:0 5px;
}
.l2 {
margin:0 3px;
}
.l3 {
margin:0 2px;
}
.l4 {
margin:0 1px;
}

/*有边框的
.round { width:200px; height:200px; left:100px; top:100px; position:relative; background:none; overflow:none;}
.round_conner{ background:none; overflow:none;}
.round_body{ height:190px; background:#abc ; overflow:none; border-left:1px #000 solid; border-right:1px #000 solid;}
.round_body_contain { padding:10px;}
.l1,.l2,.l3,.l4{ font-size:0; height:1px; overflow:none; width:auto; background:#abc; clear:both; border-left:1px #000 solid; border-right:1px #000 solid;}
.l1 {margin:0 5px; background:#000; border:none;}
.l2 {margin:0 3px; border-left:2px #000 solid; border-right:2px #000 solid;}
.l3 {margin:0 2px;}
.l4 {margin:0 1px;}*/
</style>
</head>
<body>
<div class="round">
<div class="round_conner">
    <div class="l1"> </div>
    <div class="l2"> </div>
    <div class="l3"> </div>
    <div class="l4"> </div>
    <div class="l4"> </div>
</div>
<div class="round_body" >
    <div class="round_body_contain"> asdasd.<br/>
      asdasd.<br/>
      asdasd.<br/>
    </div>
</div>
<div class="round_conner">
    <div class="l4"> </div>
    <div class="l4"> </div>
    <div class="l3"> </div>
    <div class="l2"> </div>
    <div class="l1"> </div>
</div>
</div>
</body>
</html>