用CSS做圆角的一个例子

2022-07-15 80酷酷网 80kuku.com

css|圆角HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 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"></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><div class="rbbot"><div></div></div></div></body></html>

:
/* 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>
<div class="rbbot"><div></div></div>
</div>

思路：首先我们要做五张图片四个是圆角和一个背景图片，在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.