DIV+CSS简单实现圆角矩形方法汇总【附代码】

By bboncn

实现方法二：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>runcode</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”Author” content=”Sheneyan” />
<script type=”text/javascript”>
</script>
<style type=”text/css”>
/* from http://cssplay.co.uk/boxes/snazzy2.html*/
.xsnazzy h3{margin:0; padding:0 10px 5px 10px; border-bottom:1px solid #444;}
.xsnazzy h3, .xsnazzy h3 a{font-size:1em;}
.xsnazzy {background: transparent; width:530px; margin:10px 3px 0;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #444; border-right:1px solid #444;}
.xb1 {margin:0 5px; background:#444;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; border:0 solid #444; border-width:0 1px; height:auto;}
* html .xboxcontent {height:1px;}
.color_a {background:#E2F3B8; color:#000;}
</style>
</head>
<body>
<div class=”xsnazzy”>
<b class=”xtop”><b class=”xb1″></b><b class=”xb2 color_a”></b><b class=”xb3 color_a”></b><b class=”xb4 color_a”></b></b>
<div class=’xboxcontent’>
<h3 class=”color_a”>这里是标题</h3>
<p>这里是内容</p>
</div>
<b class=”xbottom”><b class=”xb4″></b><b class=”xb3″></b><b class=”xb2″></b><b class=”xb1″></b></b>
</div>
</body>
</html>

Pages: 1 2 3 4 5

This entry was posted on July 31, 2007 at 1:03 pm and is filed under Web design | 网站开发. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “DIV+CSS简单实现圆角矩形方法汇总【附代码】”

Xiaotian Says:
July 31, 2007 at 6:46 pm
这不就一个方法么……

Sunbo’s Blog