| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS定義DIV圓角邊框

來源:互聯網  2008-09-05 07:10:18  評論

<!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" lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>testdiv</title>

<style>

#d1,#d3,#d4{

margin:5px 0px;

width:200px;

background-color:#eee;

}

#d1{

border:1px solid #444;

height:100px;

padding:0px 15px;

}

#d3,#d4{

margin-top:0px;

margin-bottom:0px;

border-left:1px solid #444;

border-right:1px solid #444;

}

.m{

height:100px;

width:200px;

padding:0px 15px;

position:relative;

}

#d3 .m{

margin:-4px 0px;

}

#d4 .m{

margin:-5px 0px;

}

.rt,.rb{

display:block;

width:232px;

margin-left:0px;

margin-right:0px;

}

.rt{

margin-top:5px;

}

.rb{

margin-bottom:5px;

}

.rt *,.rb *{

display:block;

height: 1px;

overflow: hidden;

background-color:#eee;

border-left:1px solid #444;

border-right:1px solid #444;

}

.r1{

margin: 0 5px;

background-color:#444;

}

.r2{

margin: 0 3px;

border-width:0px 2px;

}

.r3{

margin: 0 2px;

}

.r4{

margin: 0 1px;

height: 2px;

}

.rb1{

margin: 0 6px;

background-color:#444;

}

.rb2{

margin: 0 4px;

border-width:0px 2px;

}

.rb3{

margin: 0 3px;

}

.rb4{

margin: 0 2px;

}

.rb5{

margin: 0 1px;

height: 2px;

}

</style>

</head>

<body>

<div id="d1">R=...</div>

<b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b

class="r4"></b></b>

<div id="d3">

<div class="m">R=5</div>

</div>

<b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b

class="r1"></b></b>

<b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b

class="rb4"></b><b class="rb5"></b></b>

<div id="d4">

<div class="m">R=6</div>

</div>

<b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b

class="rb2"></b><b class="rb1"></b></b>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>testdiv</title> <style> #d1,#d3,#d4{ margin:5px 0px; width:200px; background-color:#eee; } #d1{ border:1px solid #444; height:100px; padding:0px 15px; } #d3,#d4{ margin-top:0px; margin-bottom:0px; border-left:1px solid #444; border-right:1px solid #444; } .m{ height:100px; width:200px; padding:0px 15px; position:relative; } #d3 .m{ margin:-4px 0px; } #d4 .m{ margin:-5px 0px; } .rt,.rb{ display:block; width:232px; margin-left:0px; margin-right:0px; } .rt{ margin-top:5px; } .rb{ margin-bottom:5px; } .rt *,.rb *{ display:block; height: 1px; overflow: hidden; background-color:#eee; border-left:1px solid #444; border-right:1px solid #444; } .r1{ margin: 0 5px; background-color:#444; } .r2{ margin: 0 3px; border-width:0px 2px; } .r3{ margin: 0 2px; } .r4{ margin: 0 1px; height: 2px; } .rb1{ margin: 0 6px; background-color:#444; } .rb2{ margin: 0 4px; border-width:0px 2px; } .rb3{ margin: 0 3px; } .rb4{ margin: 0 2px; } .rb5{ margin: 0 1px; height: 2px; } </style> </head> <body> <div id="d1">R=...</div> <b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <div id="d3"> <div class="m">R=5</div> </div> <b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> <b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b class="rb4"></b><b class="rb5"></b></b> <div id="d4"> <div class="m">R=6</div> </div> <b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b class="rb2"></b><b class="rb1"></b></b> </body> </html>
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有