DIV CSS 佈局教程網

這篇文章主要介紹了CSS的一些圓角圖形實例分享,包括帶有3D效果的CSS圓角實現,需要的朋友可以參考下

這是比較流行的CSS圓角，制作方法和理解都有困難，但看完這篇文章，就能掌握這種方法。

先看效果：

制作方法

為了更好的理解，先用簡單的代碼為例。

XHtml代碼：

XML/Html Code復制內容到剪貼板

1. <b class="top">
2. <b class="b1"></b>
3. <b class="b2"></b>
4. <b class="b3"></b>
5. <b class="b4"></b>
6. </b>

CSS代碼：

CSS Code復制內容到剪貼板

1. b{
2. display:block;
3. }
4. .b1,.b2,.b3,.b4{
5. overflow:hidden;
6. height:1px;
7. border-left:1px solid #000;
8. border-right:1px solid #000;
9. }
10. .b1{
11. margin:0 5px;
12. background:#000;
13. }
14. .b2{
15. margin:0 3px;
16. border-width:0 2px;
17. }
18. .b3{
19. margin:0 2px;
20. }
21. .b4{
22. height:2px;
23. margin:0 1px;
24. }

這段代碼效果如下圖：

.top 是一個容器，.b1 是圓角頂部的橫線，.b2 .b3 .b4 分別是設置遞減的左右 margin 和相應的 border ，他們便組成了圓角圓弧中的幾個點。合在一起，就組成了上半部分的圓角。看下面的動態圖就能很好的理解了。

為了看的更清楚，圖中用了較粗的“線”和“點”，看起來鋸齒比較明顯，而網頁上設置的 1px、2px 就不容易看出鋸齒了。

下半部分和上半部分的原理是一樣的，只是“倒”過來了。

完整的代碼

XTHML代碼：

XML/Html Code復制內容到剪貼板

1. <div id="box"><!--容器-->
2. <b class="top"><!--上半部分圓角-->
3. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
4. </b>
5. <div id="content">內容區</div>
7. <b class="bottom"><!--下半部分圓角-->
8. <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
9. </b>
10. </div>

CSS代碼：

CSS Code復制內容到剪貼板

1. b{
2. display:block;
3. }
4. .b1,.b2,.b3,.b4{
5. overflow:hidden;
6. height:1px;
7. border-left:1px solid #000;
8. border-right:1px solid #000;
9. }
10. .b1{
11. margin:0 5px;
12. background:#000;
13. }
14. .b2{
15. margin:0 3px;
16. border-width:0 2px;
17. }
18. .b3{
19. margin:0 2px;
20. }
21. .b4{
22. height:2px;
23. margin:0 1px;
24. }
25. #content{
26. border:solid #000;
27. border-width:0 1px;
28. }

3D效果CSS圓角

先看效果吧：

下面給出相應的代碼。

XHtml代碼：

XML/Html Code復制內容到剪貼板

1. <div class="box">
2. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
3. <div class="content">
4. <h1>3D效果CSS圓角</h1>
5. </div>
6. <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
7. </div>

CSS代碼：

CSS Code復制內容到剪貼板

1. *{
2. margin:0;
3. padding:0;
4. }
5. .box{
6. width:400px;
7. margin:20px auto;
8. }
9. h1{
10. font-size:2em;
11. color:#fff;
12. padding:20px;
13. text-align:center;
14. }
15. b{
16. display:block;
17. overflow:hidden;
18. height:1px;
19. background:#96C2F1;
20. border-width:0 1px;
21. border-style:solid;
22. }
23. .b1{
24. margin:0 5px;
25. background:#fff;
26. border:none;
27. }
28. .b2{
29. border-right:#eee;
30. }
31. .b3{
32. border-right:#ddd;
33. }
34. .b4{
35. border-right:#aaa;
36. }
37. .b4b{
38. border-left:#eee;
39. }
40. .b3b{
41. border-left:#ddd;
42. }
43. .b2b{
44. border-left:#aaa;
45. }
46. .b2,.b3,.b4{
47. border-left-color:#fff;
48. }
49. .b4b,.b3b,.b2b{
50. border-right-color:#999;
51. }
52. .b2,.b2b{
53. margin:0 3px;
54. border-width:0 2px;
55. }
56. .b3,.b3b{
57. margin:0 2px;
58. }
59. .b4,.b4b{
60. height:2px; margin:0 1px;
61. }
62. .b1b{
63. margin:0 5px;
64. background:#999;
65. border:none;
66. }
67. .content{
68. background:#96C2F1;
69. border-left:1px solid #fff;
70. border-right:1px solid #999;
71. }