CSS高级技巧之圆角矩形

　　原理:

　　Top-Left.gif 与 Bottom-Left.gif 都是大图像, Top-Right.gif 和 Bottom-Right.gif 都是小图像, 小图像在大图像上根据尺寸进行自动滑动以适应内容.

　　该方法用到2组4个图片: 1组Top图片构成顶部圆角, 1组Bottom图片构成底部圆角以及主体. 注意容器的最大高度和宽度不能超过图片的最大高度和宽度.

　　图片的结构位置:

　　html代码大致如下:

　　＜div class="wrapper"＞

　　＜div class="box-outer"＞

　　＜div class="box-inner"＞

　　＜h1＞标题＜/h1＞

　　＜p＞内容＜/p＞

　　＜/div＞

　　＜/div＞

　　＜/div＞

　　CSS代码大致如下:

　　.wrapper{width:20em;background:#ccc url(../images/bottom-left.gif) no-repeat left bottom;}

　　.box-outer{background:url(../images/bottom-right.gif) no-repeat right bottom;}

　　.box-inner{background:url(../images/top-left.gif) no-repeat left top;}

　　.wrapper h1{padding:2%;background:url(../images/top-right.gif) no-repeat right top;}

　　.wrapper p{padding:2%;}

　　Tips:

　　该方法很好的解决了容器扩展的问题, 但是要注意容器的最大尺寸不要超过背景图片所能构成的最大尺寸;

　　该方法需要2组额外的没有任何语义的标签, 在结构上并不理想, 我们可以用JavaScript和DOM动态添加额外元素来避免这个问题, JavaScript不作讨论.