css实现圆角效果的div，类似9宫格

先来段代码

<div class="dialog">

<div class="hd"><div class="c"></div></div>

<div class="bd"><div class="c"><div class="s">

<div class="roundbox">Text,text,text</div>

</div></div></div>

<div class="ft"><div class="c"></div></div>

</div>

这段html我们可以理解成下面的图形



再来看看css

<style type="text/css">

.dialog{

width:80%;

margin:0 auto;

min-width:20em;

}

.dialog .hd .c,.dialog .ft .c{

font-size:1px;

height:13px;

}

.dialog .ft .c{

height:14px;

}

.dialog .hd{

background:transparent url(image/tl.gif) no-repeat 0px 0px;

}

.dialog .hd .c{

background:transparent url(image/tr.gif) no-repeat right 0px;

}

.dialog .bd{

background:transparent url(image/ml.gif) repeat-y 0px 0px;

}

.dialog .bd .c{

background:transparent url(image/mr.gif) repeat-y right 0px;

}

.dialog .bd .c .s{

background:#000 url(image/ms.jpg) repeat-x 0px 0px;

margin:0px 8px 0px 4px;

padding:1em;

}

.dialog .ft{

background:transparent url(image/bl.gif) no-repeat 0px 0px;

}

.dialog .ft .c{

background:transparent url(image/br.gif) no-repeat right 0px;

}

.roundbox{

color:#FFFFFF;

line-height:150%;

font-size:1em;

}

</style>

加上这段css呢，效果如下图







最终呈现效果





实例中的边角图，可以在这里下载

http://15daysofjquery.com/examples/rounded/tl.gif

http://15daysofjquery.com/examples/rounded/tr.gif

http://15daysofjquery.com/examples/rounded/ml.gif

http://15daysofjquery.com/examples/rounded/mr.gif

http://15daysofjquery.com/examples/rounded/ms.jpg

http://15daysofjquery.com/examples/rounded/bl.gif

http://15daysofjquery.com/examples/rounded/br.gif



综合分析



配合css，理解哈~！



顺便提下Jquery，来试试配合JQuery使用圆角效果

$(document).ready(function(){ $("div.roundbox") .wrap('<div

class="dialog">'+

'<div class="bd">'+

'<div class="c">'+

'<div class="s">'+

'</div>'+

'</div>'+

'</div>'+

'</div>');

});

我们在页面上真正需要的就是一个内容div roundbox，没有Jquery我们要把修饰的div添加到页面，这么多的div却被用来修饰样式，真是可悲。

有空来分析这个页面 http://15daysofjquery.com/examples/rounded/demo.php