CSS高级技巧之圆角矩形

时间:2008-06-12 05:59:08  来源:网页教学网  作者:  【背景色 】

top.gif

<
tile.gif

bottom.gif

　　CSS代码大致如下:

　　.wrapper{width:181px;background:#8cc355 url(../images/bottom.gif) no-repeat left bottom;}

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

　　.wrapper p{padding:0 20px 10px 20px;}

　　Tips:

　　wrapper中的宽度(width)是图片的真实宽度, 背景中的背景色是与纯色图片相同的颜色.

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

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

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