宜宾网站建设公司

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

本篇内容介绍了“CSS的一些圆角图形实例介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联专注于安远企业网站建设,成都响应式网站建设,商城网站定制开发。安远网站建设公司,为安远等地区提供建站服务。全流程按需网站设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

这是比较流行的CSS圆角，制作方法和理解都有困难，但看完这篇文章，就能掌握这种方法。

先看效果：
CSS的一些圆角图形实例介绍
制作方法

为了更好的理解，先用简单的代码为例。

XHTML代码：

XML/HTML Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.   

  5.   

  6.   

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

这段代码效果如下图：
CSS的一些圆角图形实例介绍
.top 是一个容器，.b1 是圆角顶部的横线，.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ，他们便组成了圆角圆弧中的几个点。合在一起，就组成了上半部分的圆角。看下面的动态图就能很好的理解了。
CSS的一些圆角图形实例介绍
为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 1px、2px 就不容易看出锯齿了。

下半部分和上半部分的原理是一样的，只是“倒”过来了。

完整的代码

XTHML代码：

XML/HTML Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.   

  5. 内容区

  

  •   

  •   

  •   

  •   

    •   

    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圆角

    先看效果吧：
    CSS的一些圆角图形实例介绍
    下面给出相应的代码。

    XHTML代码：

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    4. 3D效果CSS圆角

        

      

  •   

    •   

    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的一些圆角图形实例介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    标题名称：CSS的一些圆角图形实例介绍
    转载来于：http://ybzwz.com/article/piojog.html

    其他资讯