css|圆角
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>无标题文档</title><style type="text/css"><!--/* START - first example */ /* set millions of background images */.rbroundbox { background:#FF9900; }.rbtop div { background: url(/static/round/006//tl.gif) no-repeat topleft; }.rbtop { background: url(/static/round/006//tr.gif) no-repeat topright; }.rbbot div { background: url(/static/round/006//bl.gif) no-repeatbottom left; }.rbbot { background: url(/static/round/006//br.gif) no-repeat bottomright; } /* height and width stuff, width not really nessisary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 15px;font-size: 1px;}.rbcontent { margin: 0 15px; }.rbroundbox { width: 50%; margin: 1em auto; }/* END - first example */ --></style></head><body><div class="rbroundbox"><div class="rbtop"><div></div></div><div class="rbcontent"> <h2>Corners</h2><p>This is a sample</p><p>Of a rounded box</p><p>With funny corners</p> </div><!-- /rbcontent--><div class="rbbot"><div></div></div></div><!-- /rbroundbox --></body></html>
CSS:
/* START - first example */ /* set millions of background images */
.rbroundbox { background: url(images/c00.gif) repeat; }
.rbtop div { background: url(images/c11.gif) no-repeat top left; }
.rbtop { background: url(images/c12.gif) no-repeat top right; }
.rbbot div { background: url(images/c21.gif) no-repeat bottom left; }
.rbbot { background: url(images/c22.gif) no-repeat bottom right; } /* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }
/* END - first example */
HTML:
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent"> <h2>Corners</h2>
<p>This is a sample</p>
<p>Of a rounded box</p>
<p>With funny corners</p> </div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
思路：首先我们要做五张图片四个是圆角和一个背景图片，在HTML中我们定义了三层DIV,第一个DIV里面套三个DIV，里面的第一个和第三DIV又分别套用一个DIV，一和三都是用来定义四个图片的，而中间DIV则为内容区。.rbtop定义一个背景图顶左，它里面的也定义一个背景图顶右。下面的第三组DIV 同理。这样我们的圆角就做好了，大功告成！对了，忘记了那个最外面的DIV在加入平铺的背景图，我们在这里的就是一个蓝色的色块。
可安全运行的浏览器：Win: IE5.5-6, Opera6-7.2, Netscape6-7, Mozilla1-3. Mac: IE 5.2, Safari, Camino .7 and OmniWeb 4.5.