CSS的一些圆角图形实例分享

前端  /  管理员 发布于 7年前   202

这是比较流行的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>  
6.   
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. }