css实现有边框圆角效果

mls · 发表于 2013-2-7 23:07:04

<html>
<head>
<title>CSS圆角</title>
<style type="text/css">
//用这段样式圆角是有边框的
.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="l1">
</div>
<div class="l2">
</div>
<div class="l3">
</div>
<div class="l4">
</div>
<div class="round_body" >
<div class="round_body_contain">
  我是有边框圆角....<br/>
  我是有边框圆角....<br/>
  我是有边框圆角....<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>

		自动登录	找回密码
密码			立即注册