圆角边框CSS做法

最新推荐文章于 2022-10-08 21:05:06 发布

taito

最新推荐文章于 2022-10-08 21:05:06 发布

阅读量120

点赞数

分类专栏： DIV+CSS 文章标签： CSS XHTML HTML

DIV+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要是利用一个有四个角的混和背景图片，显示不同的地方。再用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>

taito

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圆角边框CSS做法

主要是利用一个有四个角的混和背景图片，显示不同的地方。再用position的相对定位法，定义到div的四个角做透明背景即可。配合一个颜色差不多的边框背景，就可以显示完美的圆角背景框了。[img]http://taito.iteye.com/upload/attachment/46231/670211ce-5986-32a7-9f29-5fcde981e205.jpg[/img][c...
复制链接

扫一扫