您所在的位置:小祥子 » 编程 » CSS » 正文

Div圆角边框的实现例子+代码

时间:2015-04-18 编辑:休闲生活文化 来源:本站整理

<html>
<head>
<title>Div圆角边框的实现例子</title>
<style type="text/CSS">
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#000;}
.k {height:100px;color:#fff;}
</style>
</head>
<body>
<div style="width:200px;">
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1 k" >Div圆角<br>火狐/Chrome</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>
<div>http://www.999jiujiu.com/</div>
</body>
</html>

关键词:圆角 边框 代码