CSS的一些圆角图形实例介绍

本篇内容介绍了“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>  

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. <h2>3D效果CSS圆角</h2>  

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. h2{   

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. }  

“CSS的一些圆角图形实例介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！