div+css构造圆角矩形(懂原理的进,有100的追加分)

不好说清楚
一种用图片,另一种不用图片
用图片的,简单的直接给个背景OK
1,宽度固定的,两个图片t.gof b.gif
<div class="b">
<div class="t"></div>
</div>
.b底对齐背景,及框背景色
.t顶对齐背景
2,宽度不固定的,如用于左边和右边,样式一样宽度不一样
四个图片,有点像滑动那种做法.可适应不同宽度不同高度的框.
t.gif分两个t-l.gif t-r.gif 比如做法是让t-r.gif盖住t-l.gif的右边.那么t-l.gif是一个很长的图片,比如2000px(圆角部分一样,就是重复的地方很长,用wed的图都很小,所以不考虑图片大小.2000px也就几K),这样可以适应很多宽度的宽用t-r.gif固定宽度很小,右对齐不重复,
这里说的方便理解
<div class="mian">
<h1>
.mian背景是t-l.gif
h1背景是t-r.gif因为h1背景是右对齐不重复的(这里背景都不用重复,记得no-repeat),就是不管.mian宽度怎么变它都在右边盖住t-l.gif的右边部分.既t-r.gif在t-l.gif上滑动.

前面说是用4个图,宽中间部分可能有的是渐变的,所以在下面的图片这比较高,所以一般mian用的背景是左边尺寸比较大的图(背景下对齐)

或是mian用重复部分的背景,背景x重复.
左盖一个,右盖一个,就可以了.或加个内框,调好填充.

根据不同要求做法也不一样.最好找个教程看看,文字所的不直观
不用图象做圆角.可能会浏览器问题,所以最好还是用图片做
html里有一个标记就是用来弄圆角的,忘了是什么了