最简洁图片圆角边框-无需额外标签

　2009-09-10 00:00:00　来源：WEB开发网　　　

核心提示：目前所能写出的最简洁圆角边框了，不需要额外标签，最简洁图片圆角边框-无需额外标签，也可以只要一副图片，但这时就得添加一个额外标签，发现还没有以前写的那么感觉上优雅了，还是记下来，这是以前写的，今天又去写的时候

目前所能写出的最简洁圆角边框了，不需要额外标签。也可以只要一副图片，但这时就得添加一个额外标签。

这是以前写的，今天又去写的时候，发现还没有以前写的那么感觉上优雅了。还是记下来，以免后忘。

Html代码

<!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>　　<title>　new　document　</title>　　<meta　http-equiv="Content-Type"　content="text/html;charset=UTF-8"　/>　　<meta　name="generator"　content="editplus"　/>　　<meta　name="author"　content=""　/>　　<meta　name="keywords"　content=""　/>　　<meta　name="description"　content=""　/>　　<script　type="text/javascript"　src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>　　<script　type="text/javascript">　　　　</script>　　<style　type="text/css">　　body　{background:#fff;}　　div　{overflow:hidden;zoom:1;}　　.box　{padding-bottom:4px;width:190px;background:url("c-b-b.png")　no-repeat　left　bottom;}　　.box　h3　{margin:0;padding:0;background:url("t-bg.png")　no-repeat;height:20px;}　　.box　.c　{border:1px　solid　#5c9ec0;border-width:0　1px;padding:10px;}　　</style>　　</head>　　　<body>　　　<div　class="box">　　<h3>title</h3>　　<div　class="c">　　　<p>content</p>　　</div>　　</div>　　</body>　 </html>

主要css:

Java代码

.box　{padding-bottom:4px;width:190px;background:url("c-b-b.png")　no-repeat　left　bottom;}　　　.box　h3　{margin:0;padding:0;background:url("t-bg.png")　no-repeat;height:20px;}

Java代码

　　.box　.c　{border:1px　solid　#5c9ec0;border-width:0　1px;padding:10px;}　