CSS高级技巧之圆角矩形

　　所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍.

　　CSS2 还没有办法创造出曲线边框, 明显的, 仅仅方框是没办法满足我们设计师的. 所以CSS圆角技术到现在还是那么的火.

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

　　在众多圆角技术中, 固定宽度的圆角矩形应该是最容易实现的, 只需要2个图片以及一段简单的html代码.

　　html代码如下:

　　＜div class="wrapper"＞

　　＜h1＞标题＜/h1＞

　　＜p＞内容＜/p＞

　　＜/div＞

　　图片大致如下:

　　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)是图片的真实宽度, 背景中的背景色是与纯色图片相同的颜色.