CSS高级技巧之圆角矩形

　　h1和p中相应设置了内补丁,为了内容不重叠或碰到外框.

　　图片需要有背景色, 即除了圆角矩形纯色部分的颜色以外的区域需要有和当前容器( div class="wrapper" )所在的父级容器相同的背景色.

　　这种方法适用于宽度固定, 高度自适应的纯色圆角矩形.

　　2. 固定宽度的非纯色圆角矩形

　　这个方法是上一个方法的延伸, 这次我们不在容器上定义背景色, 而是定义重复的背景图片.

　　html代码如下:

　　＜div class="wrapper"＞

　　＜h1＞标题＜/h1＞

　　＜p＞内容＜/p＞

　　＜/div＞

　　图片大致如下:

　　top.gif

　　bottom.gif

　　CSS代码大致如下:

　　.wrapper{width:183px;background:url(../images/tile.gif) repeat-y center;}

　　.wrapper h1{padding:20px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}

　　.wrapper p{padding:0 20px 20px 20px;background:url(../images/bottom.gif) no-repeat left bottom;}

　　Tips:

　　特性与第一个方法类似;

　　不能适用于非垂直改变的背景图像.

　　PS. 固定高度的圆角矩形也可以类似的完成,不赘述了

　　3. 滑动门技术(Sliding Doors)

　　前面的两种圆角矩形都是固定宽度的,只能在垂直方向上自适应增长(或水平方向上), 如果需要同时在垂直方向与水平方向上自适应增长尺寸的话, 很显然前两种方法不适用. 这时我们就可以采用所谓的滑动门技术.