`
taito
  • 浏览: 94503 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

圆角边框CSS做法

CSSXHTMLHTML
阅读更多
主要是利用一个有四个角的混和背景图片，显示不同的地方。再用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>
  • 大小: 2.8 KB
  • 大小: 320 Bytes
  • 大小: 11.7 KB
1
顶
1
踩
分享到：
| Show一下ROR结合Ext的成果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics