我觉得这个很巧妙，虽然不是我写的～ <style type="text/css"> .nifty{ margin: 0 autobackground: #9BD1FAwidth:40%} .nifty .content { padding:0 10px} b.rtop, b.rbottom{display:blockbackground: #FFF} b.rtop b, b.rbottom b{display:blockheight:1pxoverflow:hiddenbackground:#9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px} </style> <div class="nifty"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <div class="content"> Rounded corners </div> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
有四种方法可以实现圆角。
第一、直接写CSS代码：border-radius
第二、四个圆角贴图；制作四个圆角的图片，然后用css定义
第三、直接制作整个圆角矩形背景
第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。
#div{\x0d\x0awidth:100px\x0d\x0aheight:100px\x0d\x0abackground:#000000\x0d\x0a\x0d\x0a//设置弯曲程度，当然也可以分别设置；比如只设置左下角：border-bottom-left-radius:10px\x0d\x0aborder-radius:10px\x0d\x0a}
