圓角邊框CSS做法

主要是利用一個有四個角的混和背景圖片,顯示不同的地方。再用position的相對定位法,定義到div的四個角做透明背景即可。配合一個顏色差不多的邊框背景,就可以顯示完美的圓角背景框了。

[img]http://taito.iteye.com/upload/attachment/46231/670211ce-5986-32a7-9f29-5fcde981e205.jpg[/img]

<!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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章