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

先来段代码

1. <div class="dialog">
2. <div class="hd"><div class="c"></div></div>
4. <div class="bd"><div class="c"><div class="s">
5. <div class="roundbox">Text,text,text</div>
6. </div></div></div>
8. <div class="ft"><div class="c"></div></div>
9. </div>

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

再来看看css

1. <style type="text/css">
2. .dialog{
3. width:80%;
4. margin:0 auto;
5. min-width:20em;
6. }
7. .dialog .hd .c,.dialog .ft .c{
8. font-size:1px;
9. height:13px;
10. }
11. .dialog .ft .c{
12. height:14px;
13. }
14. .dialog .hd{
15. background:transparent url(image/tl.gif) no-repeat 0px 0px;
16. }
17. .dialog .hd .c{
18. background:transparent url(image/tr.gif) no-repeat right 0px;
19. }
20. .dialog .bd{
21. background:transparent url(image/ml.gif) repeat-y 0px 0px;
22. }
23. .dialog .bd .c{
24. background:transparent url(image/mr.gif) repeat-y right 0px;
25. }
26. .dialog .bd .c .s{
27. background:#000 url(image/ms.jpg) repeat-x 0px 0px;
28. margin:0px 8px 0px 4px;
29. padding:1em;
30. }
31. .dialog .ft{
32. background:transparent url(image/bl.gif) no-repeat 0px 0px;
33. }
34. .dialog .ft .c{
35. background:transparent url(image/br.gif) no-repeat right 0px;
36. }
38. .roundbox{
39. color:#FFFFFF;
40. line-height:150%;
41. font-size:1em;
42. }
43. </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使用圆角效果

1. $(document).ready(function(){ $("div.roundbox") .wrap('<div 
2. class="dialog">'+ 
3. '<div class="bd">'+ 
4. '<div class="c">'+ 
5. '<div class="s">'+ 
6. '</div>'+ 
7. '</div>'+ 
8. '</div>'+ 
9. '</div>'); 
10. });

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

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