<!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.0实现圆角框</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>
另附:FF,Safari和Chrome 可分别用以下属性来设置圆角(CSS 3.0)
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
1186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
