圆角边框CSS做法

主要是利用一个有四个角的混和背景图片,显示不同的地方。再用position的相对定位法,定义到div的四个角做透明背景即可。配合一个颜色差不多的边框背景,就可以显示完美的圆角背景框了。



<!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=gb2312" />
<title>圆角边框CSS做法</title>
<style type="text/css">
/*
anthor:taito
*/
.Container{position:relative;margin:0px;padding:0px; width:684px; text-align:center}
.Box{border:1px solid #d4dae8;background:url(BG.jpg) bottom center no-repeat;padding:0px;}
.Corner{position:absolute;width:7px;height:7px;background:transparent url(Corners.png) top left no-repeat;}
.ie6 .Corner{display:none;}
.CornerTL{background-position:left -7px;top:0px;left:0px;}
.CornerTR{background-position:left 0px;top:0px;right:0px;}
.CornerBL{background-position:left -14px;left:0px;bottom:0px;}
.CornerBR{background-position:left -21px;right:0px;bottom:0px;}
</style>
</head>

<body>
<div class="Container">
	<div class="Box">Corner</div>
	<div class="Corner CornerTL"> </div>
	<div class="Corner CornerTR"> </div>
	<div class="Corner CornerBL"> </div>
	<div class="Corner CornerBR"> </div>
</div>

</body>
</html>

你可能感兴趣的:(html,css,XHTML)