xhtml+css布局圆角盒子的实现方法--XHTML＋CSS教程--网页编织者:web标准教程及推广

XHTML＋CSS教程——布局经验

xhtml+css布局圆角盒子的实现方法

作者：knitter 2008-6-12

方法一：纯div+css实现

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>网页编织者:www.86w3.com</title>    
<style type="text/css">   
.circle_tb1 {  
height:0;  
overflow:hidden;  
margin:0 3px;  
border-top:1px solid #d4d4d4;  
}  
.circle_tb2,.circle_tb3 {  
height:1px;  
margin:0 2px;  
overflow:hidden;  
border:1px solid #d4d4d4;  
border-width:0 1px;  
}  
.circle_tb3 {  
margin:0 1px;  
}  
.circle {  
border:1px solid #d4d4d4;  
border-width:0 1px;  
}  
</style>  
</head>  
<div>  
<div class="circle_tb1"></div>  
<div class="circle_tb2"></div>  
<div class="circle_tb3"></div>  
<div class="circle">纯div+css实现<br /><br /><br /><br /><br /><br />  
</div>  
<div class="circle_tb3"></div>  
<div class="circle_tb2"></div>  
<div class="circle_tb1"></div>  
</div>  
</body>    
</html>

提示：您可以先修改部分代码再运行

方法二：xhtml+css+背景图实现(代码里的圆角图片我都用色块代替了，这里主要是让大家明白实现的思路)

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>网页编织者:www.86w3.com</title>    
<style type="text/css">   
.circle_tl,.circle_tr,.circle_bl,.circle_br {  
float:left;  
width:10px;  
height:10px;  
margin:0 0 -10px;  
overflow:hidden;  
background:#CCC url(左上角背景图) no-repeat left top;  
}  
.circle_tr {  
float:right;  
background:#CCC url(右上角背景图) no-repeat left top;  
}  
.circle_bl {  
float:left;  
margin:-10px 0 0;  
background:#CCC url(左下角背景图) no-repeat left top;  
}  
.circle_br {  
float:right;  
margin:-10px 0 0;  
background:#CCC url(右下角背景图) no-repeat left top;  
}  
.circle {  
border:1px solid #d4d4d4;  
background:#f0f0f0 url(盒子内背景图) repeat left top;  
}  
</style>  
</head>  
<div>  
<div class="circle_tl"></div>  
<div class="circle_tr"></div>  
<div class="circle">fdfd<br /><br /><br /><br /><br /><br />  
</div>  
<div class="circle_bl"></div>  
<div class="circle_br"></div>  
</div>  
</body>    
</html>

提示：您可以先修改部分代码再运行

本站文章可直接用浏览器打印，无须专门打印页。 TOP

站内搜索：

在线手册

XHTML＋CSS教程——布局经验