zoukankan      html  css  js  c++  java

  • 160419、CSS3实现32种基本图形

    CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

         这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。
         网页代码中用到（<!-- 浮动Div换行 --> <div style="clear:both">）和Div边距设置和浮动（margin: 20px 20px; float: left;）。

         参考文章：编程之家：http://blog.csdn.net/chenhongwu666/article/details/38905803

            1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。

         效果图：

                        

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Circle{  
    2.   100px;  
    3.   height:100px;  
    4.   float: left;  
    5.   background: #6fee1d;  
    6.   -moz-border-radius: 50px;  
    7.   -webkit-border-radius: 50px;  
    8.   border-radius: 50px;  
    9. }  

        2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。

        效果图：

                     

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Oval {  
    2.     200px;  
    3.    height: 100px;  
    4.    float: left;  
    5.    background: #e9880c;  
    6.    -webkit-border-radius: 100px / 50px;  
    7.    -moz-border-radius: 100px / 50px;  
    8.    border-radius: 100px / 50px;  
    9.  }  

        3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。

        效果图：

                     

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Triangle {  
    2.     0;  
    3.    height: 0;  
    4.    float: left;  
    5.    border-bottom: 100px solid #fcf706;  
    6.    border-left: 50px solid transparent;  
    7.    border-right: 50px solid transparent;  
    8.  }  

           4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。

        效果图：

                 

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #InvertedTriangle {  
    2.     0;  
    3.    height: 0;  
    4.    float: left;  
    5.    border-top: 100px solid #30a3bf;  
    6.    border-left: 50px solid transparent;  
    7.    border-right: 50px solid transparent;  
    8.  }  

          5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。

        效果图：

                  

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #LeftTriangle {  
    2.    0;  
    3.   height: 0;  
    4.   float: left;  
    5.   border-top: 50px solid transparent;  
    6.   border-right: 100px solid #466f20;  
    7.   border-bottom: 50px solid transparent;  
    8. }  

          6.右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid。

          效果图：

                  

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #RightTriangle {  
    2.     0;  
    3.    height: 0;  
    4.    float: left;  
    5.    border-top: 50px solid transparent;  
    6.    border-left: 100px solid #800820;  
    7.    border-bottom: 50px solid transparent;  
    8.  }  

         7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

         效果图：

               

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Diamond {  
    2.    100px;  
    3.   height: 100px;  
    4.   float: left;  
    5.   background: #8e00ff;  
    6.   /* Rotate */  
    7.   -webkit-transform: rotate(-45deg);  
    8.   -moz-transform: rotate(-45deg);  
    9.   -ms-transform: rotate(-45deg);  
    10.   -o-transform: rotate(-45deg);  
    11.   transform: rotate(-45deg);  
    12.   /* Rotate Origin */  
    13.   -webkit-transform-origin: 0 100%;  
    14.   -moz-transform-origin: 0 100%;  
    15.   -ms-transform-origin: 0 100%;  
    16.   -o-transform-origin: 0 100%;  
    17.   transform-origin: 0 100%;  
    18.   margin: 40px 0 10px 240px;  
    19.  }  

         8.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

        效果图：

                  

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Trapezium {  
    2.  height: 0;  
    3.   100px;  
    4.  float: left;  
    5.  border-bottom: 100px solid #dc2500;  
    6.  border-left: 50px solid transparent;  
    7.  border-right: 50px solid transparent;  
    8. }  

          9.长方形：宽比高长。

         效果图：

            

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Rectangle {  
    2.  height: 50px;  
    3.   100px;  
    4.  float: left;  
    5.  background: #afe05d;  
    6. }  

         10.正方形：宽和高相等。

        效果图：

                

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Square {  
    2.  height: 100px;  
    3.   100px;  
    4.  float: left;  
    5.  background: #b02089;  
    6. }  

          11.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。

          效果图：

              

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Ring {  
    2.   100px;  
    3.  height: 100px;  
    4.  float: left;  
    5.  background-color: white;  
    6.  border-radius: 80px;  
    7.  border:5px #ffd700 solid;  
    8. }  

          12.平行四边形：使用transform使长方形倾斜一个角度。

         效果图：

                 

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Parallelogram {  
    2.   120px;  
    3.  height: 80px;  
    4.  float: left;  
    5.  margin-left: 10px;  
    6.  -webkit-transform: skew(30deg);  
    7.  -moz-transform: skew(230deg);  
    8.  -o-transform: skew(30deg);  
    9.  transform: skew(30deg);  
    10.  background-color: #2eda01;  
    11. }  

         13.五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。

          效果图：

             

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #FiveStar {  
    2.     0;  
    3.    height: 0;  
    4.    float: left;  
    5.    margin: 20px 20px;  
    6.    color: #ff0012;  
    7.    position: relative;  
    8.    display: block;  
    9.    border-right: 80px solid transparent;  
    10.    border-bottom: 60px solid #ff0012;  
    11.    border-left: 80px solid transparent;  
    12.    -moz-transform: rotate(35deg);  
    13.    -webkit-transform: rotate(35deg);  
    14.    -ms-transform: rotate(35deg);  
    15.    -o-transform: rotate(35deg);  
    16.  }  
    17.  #FiveStar:before {  
    18.    height: 0;  
    19.     0;  
    20.    content: '';  
    21.    position: absolute;  
    22.    display: block;  
    23.    top: -35px;  
    24.    left: -50px;  
    25.    border-bottom: 60px solid #ff0012;  
    26.    border-left: 20px solid transparent;  
    27.    border-right: 20px solid transparent;  
    28.    -webkit-transform: rotate(-35deg);  
    29.    -moz-transform: rotate(-35deg);  
    30.    -ms-transform: rotate(-35deg);  
    31.    -o-transform: rotate(-35deg);  
    32.  }  
    33.  #FiveStar:after {  
    34.     0;  
    35.    height: 0;  
    36.    content: '';  
    37.    position: absolute;  
    38.    display: block;  
    39.    top: 3px;  
    40.    left: -85px;  
    41.    color: #ff0012;  
    42.    border-right: 80px solid transparent;  
    43.    border-bottom: 60px solid #ff0012;  
    44.    border-left: 80px solid transparent;  
    45.    -webkit-transform: rotate(-70deg);  
    46.    -moz-transform: rotate(-70deg);  
    47.    -ms-transform: rotate(-70deg);  
    48.    -o-transform: rotate(-70deg);  
    49.  }  

          14.六角星：使用transform属性来旋转不同的边。

         效果图：

               

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #SixStar{  
    2.    0;  
    3.   height: 0;  
    4.   float: left;  
    5.   border-left: 50px solid transparent;  
    6.   border-right: 50px solid transparent;  
    7.   border-bottom: 100px solid #cfd810;  
    8.   position: relative;  
    9.  }  
    10.  #SixStar:after{  
    11.    0;  
    12.   height: 0;  
    13.   content: "";  
    14.   border-top: 100px solid #cfd810;  
    15.   border-left: 50px solid transparent;  
    16.   border-right: 50px solid transparent;  
    17.   position: absolute;  
    18.   top: 30px;  
    19.   left: -50px;  
    20.  }  

         15.六边形：在长方形上面和下面各放置一个三角形。

           效果图：

                    

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Hexagon {  
    2.     100px;  
    3.    height: 55px;  
    4.    float: left;  
    5.    background: #000001;  
    6.    position: relative;  
    7.    margin: 10px auto;  
    8.  }  
    9.  #Hexagon:before {  
    10.    content: "";  
    11.     0;  
    12.    height: 0;  
    13.    position: absolute;  
    14.    top: -25px;  
    15.    left: 0;  
    16.    border-left: 50px solid transparent;  
    17.    border-right: 50px solid transparent;  
    18.    border-bottom: 25px solid #000001;  
    19. }  
    20. #Hexagon:after {  
    21.   content: "";  
    22.    0;  
    23.   height: 0;  
    24.   position: absolute;  
    25.   bottom: -25px;  
    26.   left: 0;  
    27.   border-left: 50px solid transparent;  
    28.   border-right: 50px solid transparent;  
    29.   border-top: 25px solid #000001;  
    30. }  

         16.五边形：可以采用三角形和梯形组合。

           效果图：

                   

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Pentagon{  
    2.    60px;  
    3.   float: left;  
    4.   position: relative;  
    5.   border- 52px 20px 0;  
    6.   border-style: solid;  
    7.   border-color: #711ee2 transparent;  
    8. }  
    9. #Pentagon:before{  
    10.   content: "";  
    11.   position: absolute;  
    12.    0;  
    13.   height: 0;  
    14.   top: -92px;  
    15.   left: -20px;  
    16.   border- 0 50px 40px;  
    17.   border-style: solid;  
    18.   border-color: transparent transparent #711ee2;  
    19. }  

         17.八边形：在长方形上面和下面各放置一个梯形。

        效果图：

               

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Octagon{  
    2.    100px;  
    3.   height: 100px;  
    4.   float: left;  
    5.   margin: 10px 10px;  
    6.   background-color: #66e006;  
    7.   position: relative;  
    8.  }  
    9.  #Octagon:before{  
    10.    42px;  
    11.   height: 0;  
    12.   top: 0;  
    13.   left: 0;  
    14.   position: absolute;  
    15.   content: "";  
    16.   border-left: 29px solid #ffffff;  
    17.   border-right: 29px solid #ffffff;  
    18.   border-bottom: 29px solid #66e006;  
    19.  }  
    20.  #Octagon:after{  
    21.    42px;  
    22.   height: 0;  
    23.   left: 0;  
    24.   bottom: 0;  
    25.   position: absolute;  
    26.   content: "";  
    27.   border-left: 29px solid #ffffff;  
    28.   border-right: 29px solid #ffffff;  
    29.   border-top: 29px solid #66e006;  
    30.  }  

        18.心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。

         效果图：

            

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Heart {  
    2.   float: left;  
    3.   position: relative;  
    4.  }  
    5.  #Heart:before, #Heart:after {  
    6.   content: "";  
    7.    70px;  
    8.   height: 115px;  
    9.   position: absolute;  
    10.   background: red;  
    11.   left: 70px;  
    12.   top: 0;  
    13.   -webkit-border-radius: 50px 50px 0 0;  
    14.   -moz-border-radius: 50px 50px 0 0;  
    15.   border-radius: 50px 50px 0 0;  
    16.   -webkit-transform: rotate(-45deg);  
    17.   -moz-transform: rotate(-45deg);  
    18.   -ms-transform: rotate(-45deg);  
    19.   -o-transform: rotate(-45deg);  
    20.   transform: rotate(-45deg);  
    21.   -webkit-transform-origin: 0 100%;  
    22.   -moz-transform-origin: 0 100%;  
    23.   -ms-transform-origin: 0 100%;  
    24.   -o-transform-origin: 0 100%;  
    25.   transform-origin: 0 100%;  
    26. }  
    27. #Heart:after {  
    28.   left: 0;  
    29.   -webkit-transform: rotate(45deg);  
    30.   -moz-transform: rotate(45deg);  
    31.   -ms-transform: rotate(45deg);  
    32.   -o-transform: rotate(45deg);  
    33.   transform: rotate(45deg);  
    34.   -webkit-transform-origin: 100% 100%;  
    35.   -moz-transform-origin: 100% 100%;  
    36.   -ms-transform-origin: 100% 100%;  
    37.   -o-transform-origin: 100% 100%;  
    38.   transform-origin: 100% 100%;  
    39.  }  

          19.蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。

         效果图：

              

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Egg {  
    2.    100px;  
    3.   height: 160px;  
    4.   float: left;  
    5.   background: #ffb028;  
    6.   display: block;  
    7.   -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
    8.   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
    9.  }  

          20.无穷符号：通过border属性和设置伪元素的角度来实现。

         效果图：

                 

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Infinity {  
    2.    220px;  
    3.   height: 100px;  
    4.   float: left;  
    5.   position: relative;  
    6.  }  
    7.  #Infinity:before, #Infinity:after {  
    8.   content: "";  
    9.    60px;  
    10.   height: 60px;  
    11.   position: absolute;  
    12.   top: 0;  
    13.   left: 0;  
    14.   border: 20px solid #008bb0;  
    15.   -moz-border-radius: 50px 50px 0;  
    16.   border-radius: 50px 50px 0 50px;  
    17.   -webkit-transform: rotate(-45deg);  
    18.   -moz-transform: rotate(-45deg);  
    19.   -ms-transform: rotate(-45deg);  
    20.   -o-transform: rotate(-45deg);  
    21.   transform: rotate(-45deg);  
    22.  }  
    23.  #Infinity:after {  
    24.   left: auto;  
    25.   right: 0;  
    26.   -moz-border-radius: 50px 50px 50px 0;  
    27.   border-radius: 50px 50px 50px 0;  
    28.   -webkit-transform: rotate(45deg);  
    29.   -moz-transform: rotate(45deg);  
    30.   -ms-transform: rotate(45deg);  
    31.   -o-transform: rotate(45deg);  
    32.   transform: rotate(45deg);  
    33.  }  

         21.消息提示框：一个圆角矩形加左边中间的一个小三角形。

         效果图：

               

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #CommentBubble {  
    2.     140px;  
    3.    height: 100px;  
    4.    margin: 30px 20px;  
    5.    float: left;  
    6.    background: #8867b9;  
    7.    position: relative;  
    8.    -moz-border-radius: 12px;  
    9.    -webkit-border-radius: 12px;  
    10.    border-radius: 12px;  
    11.  }  
    12.  #CommentBubble:before {  
    13.    content: "";  
    14.     0;  
    15.    height: 0;  
    16.    right: 100%;  
    17.    top: 38px;  
    18.    position: absolute;  
    19.    border-top: 13px solid transparent;  
    20.    border-right: 26px solid #8867b9;  
    21.    border-bottom: 13px solid transparent;  
    22.  }  

         22.钻石：上面一个梯形，下面一个三角形组成。

          效果图：

                 

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Diamonds{  
    2.    50px;  
    3.   height: 0;  
    4.   float: left;  
    5.   border-style: solid;  
    6.   border-color: transparent transparent #9aff02 transparent;  
    7.   border- 0 25px 25px 25px;  
    8.   position: relative;  
    9.   margin: 20px 0 50px 0;  
    10. }  
    11. #Diamonds:after{  
    12.    0;  
    13.   height: 0;  
    14.   top: 25px;  
    15.   left: -25px;  
    16.   border-style: solid;  
    17.   border-color: #9aff02 transparent transparent transparent;  
    18.   border- 70px 50px 0 50px;  
    19.   position: absolute;  
    20.   content: "";  
    21.  }  

          23.八卦图：多个圆形的组合。

           效果图：

              

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #EightDiagrams{  
    2.    96px;  
    3.   height: 48px;  
    4.   margin: 20px 20px;  
    5.   float: left;  
    6.   background-color: #ffffff;  
    7.   border-color: #000000;  
    8.   border-style: solid;  
    9.   border- 2px 2px 50px 2px;  
    10.   border-radius: 100%;  
    11.   position: relative;  
    12.  }  
    13.  #EightDiagrams:before {  
    14.    12px;  
    15.   height: 12px;  
    16.   top: 50%;  
    17.   left: 0;  
    18.   content: "";  
    19.   position: absolute;  
    20.   background-color: #ffffff;  
    21.   border: 18px solid #000000;  
    22.   border-radius: 100%;  
    23.  }  
    24.  #EightDiagrams:after {  
    25.    12px;  
    26.   height: 12px;  
    27.   top: 50%;  
    28.   left: 50%;  
    29.   background-color: #000000;  
    30.   border: 18px solid #ffffff;  
    31.   border-radius:100%;  
    32.   content: "";  
    33.   position: absolute;  
    34.  }  

           24.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。

           效果图：

            

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #PacMan {  
    2.   0;  
    3.  height: 0;  
    4.  float: left;  
    5.  border-right: 60px solid transparent;  
    6.  border-left: 60px solid #300fed;  
    7.  border-top: 60px solid #300fed;  
    8.  border-bottom: 60px solid #300fed;  
    9.  border-top-left-radius: 60px;  
    10.  border-top-right-radius: 60px;  
    11.  border-bottom-left-radius: 60px;  
    12.  border-bottom-right-radius: 60px;  
    13. }  

          25.扇形：在三角形的基础上，让其中一边成弧形 。

           效果图：

              

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Sector {  
    2.    0;  
    3.    height:0;  
    4.    float: left;  
    5.    background-color: #ffffff;  
    6.    border-left: 70px solid transparent;  
    7.    border-right: 70px solid transparent;  
    8.    border-top: 100px solid #ab9ed1;  
    9.    border-radius:50%;  
    10.  }  

          26.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

            效果图：

                

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #CrescentMoon{  
    2.    80px;  
    3.    height:80px;  
    4.    float: left;  
    5.    background-color: #ffffff;  
    6.    border-radius:50%;  
    7.    box-shadow: 15px 15px 0 0 #9600d2;  
    8.  }  

          27.顶左直角三角形。

           效果图：

              

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #TopLeftTriangle {  
    2.     0px;  
    3.    height: 0px;  
    4.    margin: 10px 10px;  
    5.    float: left;  
    6.    border-top: 100px solid #7efde1;  
    7.    border-right: 100px solid transparent;  
    8.  }  

           28.顶右直角三角形。

             效果图：

                  

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #TopRightTriangle {  
    2.    0px;  
    3.   height: 0px;  
    4.   margin: 10px 10px;  
    5.   float: left;  
    6.   border-top: 100px solid #400526;  
    7.   border-left: 100px solid transparent;  
    8. }  

          29.底左直角三角形。

            效果图：

                  

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #BottomLeftTriangle {  
    2.    0px;  
    3.   height: 0px;  
    4.   margin: 10px 10px;  
    5.   float: left;  
    6.   border-bottom: 100px solid #600ffe;  
    7.   border-right: 100px solid transparent;  
    8.  }  

         30.底右直角三角形。

            效果图：

                  

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #BottomRightTriangle {  
    2.    0px;  
    3.   height: 0px;  
    4.   margin: 10px 10px;  
    5.   float: left;  
    6.   border-bottom: 100px solid #ff7578;  
    7.   border-left: 100px solid transparent;  
    8.  }  

          31.八角形。

            效果图：

                      

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Burst8 {  
    2.   80px;  
    3.  height: 80px;  
    4.  margin: 10px 10px;  
    5.  float: left;  
    6.  background-color: #cf7668;  
    7.  position: relative;  
    8.  transform:rotate(20deg);  
    9.  -webkit-transform:rotate(20deg);  
    10.  -ms-transform:rotate(20deg);  
    11.  -moz-transform:rotate(20deg);  
    12.  -o-transform:rotate(20deg);  
    13. }  
    14. #Burst8:before{  
    15.   80px;  
    16.  height: 80px;  
    17.  top: 0;  
    18.  left: 0;  
    19.  background-color: #cf7668;  
    20.  position: absolute;  
    21.  content: "";  
    22.  transform:rotate(135deg);  
    23.  -webkit-transform:rotate(135deg);  
    24.  -ms-transform:rotate(135deg);  
    25.  -moz-transform:rotate(135deg);  
    26.  -o-transform:rotate(135deg);  
    27. }  

         32.十二角形。

              效果图：

                 

    [css] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. #Burst12 {  
    2.     80px;  
    3.    height: 80px;  
    4.    margin: 20px 20px;  
    5.    float: left;  
    6.    background-color: #a8ff26;  
    7.    position: relative;  
    8.    text-align: center;  
    9.  }  
    10.  #Burst12:before, #Burst12:after{  
    11.     80px;  
    12.    height: 80px;  
    13.    top: 0;  
    14.    left: 0;  
    15.    background-color: #a8ff26;  
    16.    position: absolute;  
    17.    content: "";  
    18.  }  
    19.  #Burst12:before{  
    20.    transform:rotate(30deg);  
    21.    -webkit-transform:rotate(30deg);  
    22.    -ms-transform:rotate(30deg);  
    23.    -moz-transform:rotate(30deg);  
    24.    -o-transform:rotate(30deg);  
    25.  }  
    26.  #Burst12:after{  
    27.    transform:rotate(60deg);  
    28.    -webkit-transform:rotate(60deg);  
    29.    -ms-transform:rotate(60deg);  
    30.    -moz-transform:rotate(60deg);  
    31.    -o-transform:rotate(60deg);  
    32.  }  

         完整的CSS3+HTML5代码：BaseGraphCSS3.html

          效果图：

           

    [html] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <meta charset="UTF-8">  
    5.   <title>CSS3实现基本图形</title>  
    6.   <style>  
    7.    #Circle{  
    8.      100px;  
    9.      height:100px;  
    10.      float: left;  
    11.      background: #6fee1d;  
    12.      -moz-border-radius: 50px;  
    13.      -webkit-border-radius: 50px;  
    14.      border-radius: 50px;  
    15.    }  
    16.    #Oval {  
    17.       200px;  
    18.      height: 100px;  
    19.      float: left;  
    20.      background: #e9880c;  
    21.      -webkit-border-radius: 100px / 50px;  
    22.      -moz-border-radius: 100px / 50px;  
    23.      border-radius: 100px / 50px;  
    24.    }  
    25.    #Triangle {  
    26.       0;  
    27.      height: 0;  
    28.      float: left;  
    29.      border-bottom: 100px solid #fcf706;  
    30.      border-left: 50px solid transparent;  
    31.      border-right: 50px solid transparent;  
    32.    }  
    33.    #InvertedTriangle {  
    34.       0;  
    35.      height: 0;  
    36.      float: left;  
    37.      border-top: 100px solid #30a3bf;  
    38.      border-left: 50px solid transparent;  
    39.      border-right: 50px solid transparent;  
    40.    }  
    41.    #LeftTriangle {  
    42.       0;  
    43.      height: 0;  
    44.      float: left;  
    45.      border-top: 50px solid transparent;  
    46.      border-right: 100px solid #466f20;  
    47.      border-bottom: 50px solid transparent;  
    48.    }  
    49.    #RightTriangle {  
    50.       0;  
    51.      height: 0;  
    52.      float: left;  
    53.      border-top: 50px solid transparent;  
    54.      border-left: 100px solid #800820;  
    55.      border-bottom: 50px solid transparent;  
    56.    }  
    57.    #Diamond {  
    58.      100px;  
    59.     height: 100px;  
    60.     float: left;  
    61.     background: #8e00ff;  
    62.     /* Rotate */  
    63.     -webkit-transform: rotate(-45deg);  
    64.     -moz-transform: rotate(-45deg);  
    65.     -ms-transform: rotate(-45deg);  
    66.     -o-transform: rotate(-45deg);  
    67.     transform: rotate(-45deg);  
    68.     /* Rotate Origin */  
    69.     -webkit-transform-origin: 0 100%;  
    70.     -moz-transform-origin: 0 100%;  
    71.     -ms-transform-origin: 0 100%;  
    72.     -o-transform-origin: 0 100%;  
    73.     transform-origin: 0 100%;  
    74.     margin: 40px 0 10px 240px;  
    75.    }  
    76.    #Trapezium {  
    77.     height: 0;  
    78.      100px;  
    79.     float: left;  
    80.     border-bottom: 100px solid #dc2500;  
    81.     border-left: 50px solid transparent;  
    82.     border-right: 50px solid transparent;  
    83.    }  
    84.    #Rectangle {  
    85.     height: 50px;  
    86.      100px;  
    87.     float: left;  
    88.     background: #afe05d;  
    89.    }  
    90.    #Square {  
    91.     height: 100px;  
    92.      100px;  
    93.     float: left;  
    94.     background: #b02089;  
    95.    }  
    96.    #Ring {  
    97.      100px;  
    98.     height: 100px;  
    99.     float: left;  
    100.     background-color: white;  
    101.     border-radius: 80px;  
    102.     border:5px #ffd700 solid;  
    103.    }  
    104.    #Parallelogram {  
    105.      120px;  
    106.     height: 80px;  
    107.     float: left;  
    108.     margin-left: 10px;  
    109.     -webkit-transform: skew(30deg);  
    110.     -moz-transform: skew(230deg);  
    111.     -o-transform: skew(30deg);  
    112.     transform: skew(30deg);  
    113.     background-color: #2eda01;  
    114.    }  
    115.   
    116.    #FiveStar {  
    117.       0;  
    118.      height: 0;  
    119.      float: left;  
    120.      margin: 20px 20px;  
    121.      color: #ff0012;  
    122.      position: relative;  
    123.      display: block;  
    124.      border-right: 80px solid transparent;  
    125.      border-bottom: 60px solid #ff0012;  
    126.      border-left: 80px solid transparent;  
    127.      -moz-transform: rotate(35deg);  
    128.      -webkit-transform: rotate(35deg);  
    129.      -ms-transform: rotate(35deg);  
    130.      -o-transform: rotate(35deg);  
    131.    }  
    132.    #FiveStar:before {  
    133.      height: 0;  
    134.       0;  
    135.      content: '';  
    136.      position: absolute;  
    137.      display: block;  
    138.      top: -35px;  
    139.      left: -50px;  
    140.      border-bottom: 60px solid #ff0012;  
    141.      border-left: 20px solid transparent;  
    142.      border-right: 20px solid transparent;  
    143.      -webkit-transform: rotate(-35deg);  
    144.      -moz-transform: rotate(-35deg);  
    145.      -ms-transform: rotate(-35deg);  
    146.      -o-transform: rotate(-35deg);  
    147.    }  
    148.    #FiveStar:after {  
    149.       0;  
    150.      height: 0;  
    151.      content: '';  
    152.      position: absolute;  
    153.      display: block;  
    154.      top: 3px;  
    155.      left: -85px;  
    156.      color: #ff0012;  
    157.      border-right: 80px solid transparent;  
    158.      border-bottom: 60px solid #ff0012;  
    159.      border-left: 80px solid transparent;  
    160.      -webkit-transform: rotate(-70deg);  
    161.      -moz-transform: rotate(-70deg);  
    162.      -ms-transform: rotate(-70deg);  
    163.      -o-transform: rotate(-70deg);  
    164.    }  
    165.   
    166.    #SixStar{  
    167.       0;  
    168.      height: 0;  
    169.      float: left;  
    170.      border-left: 50px solid transparent;  
    171.      border-right: 50px solid transparent;  
    172.      border-bottom: 100px solid #cfd810;  
    173.      position: relative;  
    174.     }  
    175.     #SixStar:after{  
    176.       0;  
    177.      height: 0;  
    178.      content: "";  
    179.      border-top: 100px solid #cfd810;  
    180.      border-left: 50px solid transparent;  
    181.      border-right: 50px solid transparent;  
    182.      position: absolute;  
    183.      top: 30px;  
    184.      left: -50px;  
    185.     }  
    186.   
    187.     #Pentagon{  
    188.        60px;  
    189.       float: left;  
    190.       position: relative;  
    191.       border- 52px 20px 0;  
    192.       border-style: solid;  
    193.       border-color: #711ee2 transparent;  
    194.     }  
    195.     #Pentagon:before{  
    196.       content: "";  
    197.       position: absolute;  
    198.        0;  
    199.       height: 0;  
    200.       top: -92px;  
    201.       left: -20px;  
    202.       border- 0 50px 40px;  
    203.       border-style: solid;  
    204.       border-color: transparent transparent #711ee2;  
    205.     }  
    206.   
    207.     #Hexagon {  
    208.        100px;  
    209.       height: 55px;  
    210.       float: left;  
    211.       background: #000001;  
    212.       position: relative;  
    213.       margin: 10px auto;  
    214.     }  
    215.     #Hexagon:before {  
    216.       content: "";  
    217.        0;  
    218.       height: 0;  
    219.       position: absolute;  
    220.       top: -25px;  
    221.       left: 0;  
    222.       border-left: 50px solid transparent;  
    223.       border-right: 50px solid transparent;  
    224.       border-bottom: 25px solid #000001;  
    225.    }  
    226.    #Hexagon:after {  
    227.      content: "";  
    228.       0;  
    229.      height: 0;  
    230.      position: absolute;  
    231.      bottom: -25px;  
    232.      left: 0;  
    233.      border-left: 50px solid transparent;  
    234.      border-right: 50px solid transparent;  
    235.      border-top: 25px solid #000001;  
    236.    }  
    237.   
    238.    #Octagon{  
    239.      100px;  
    240.     height: 100px;  
    241.     float: left;  
    242.     margin: 10px 10px;  
    243.     background-color: #66e006;  
    244.     position: relative;  
    245.    }  
    246.    #Octagon:before{  
    247.      42px;  
    248.     height: 0;  
    249.     top: 0;  
    250.     left: 0;  
    251.     position: absolute;  
    252.     content: "";  
    253.     border-left: 29px solid #ffffff;  
    254.     border-right: 29px solid #ffffff;  
    255.     border-bottom: 29px solid #66e006;  
    256.    }  
    257.    #Octagon:after{  
    258.      42px;  
    259.     height: 0;  
    260.     left: 0;  
    261.     bottom: 0;  
    262.     position: absolute;  
    263.     content: "";  
    264.     border-left: 29px solid #ffffff;  
    265.     border-right: 29px solid #ffffff;  
    266.     border-top: 29px solid #66e006;  
    267.    }  
    268.   
    269.    #Heart {  
    270.     float: left;  
    271.     position: relative;  
    272.    }  
    273.    #Heart:before, #Heart:after {  
    274.     content: "";  
    275.      70px;  
    276.     height: 115px;  
    277.     position: absolute;  
    278.     background: red;  
    279.     left: 70px;  
    280.     top: 0;  
    281.     -webkit-border-radius: 50px 50px 0 0;  
    282.     -moz-border-radius: 50px 50px 0 0;  
    283.     border-radius: 50px 50px 0 0;  
    284.     -webkit-transform: rotate(-45deg);  
    285.     -moz-transform: rotate(-45deg);  
    286.     -ms-transform: rotate(-45deg);  
    287.     -o-transform: rotate(-45deg);  
    288.     transform: rotate(-45deg);  
    289.     -webkit-transform-origin: 0 100%;  
    290.     -moz-transform-origin: 0 100%;  
    291.     -ms-transform-origin: 0 100%;  
    292.     -o-transform-origin: 0 100%;  
    293.     transform-origin: 0 100%;  
    294.   }  
    295.   #Heart:after {  
    296.     left: 0;  
    297.     -webkit-transform: rotate(45deg);  
    298.     -moz-transform: rotate(45deg);  
    299.     -ms-transform: rotate(45deg);  
    300.     -o-transform: rotate(45deg);  
    301.     transform: rotate(45deg);  
    302.     -webkit-transform-origin: 100% 100%;  
    303.     -moz-transform-origin: 100% 100%;  
    304.     -ms-transform-origin: 100% 100%;  
    305.     -o-transform-origin: 100% 100%;  
    306.     transform-origin: 100% 100%;  
    307.    }  
    308.   
    309.    #Egg {
    310.      100px;  
    311.     height: 160px;  
    312.     float: left;  
    313.     background: #ffb028;  
    314.     display: block;  
    315.     -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
    316.     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
    317.    }  
    318.   
    319.    #Infinity {  
    320.      220px;  
    321.     height: 100px;  
    322.     float: left;  
    323.     position: relative;  
    324.    }  
    325.    #Infinity:before, #Infinity:after {  
    326.     content: "";  
    327.      60px;  
    328.     height: 60px;  
    329.     position: absolute;  
    330.     top: 0;  
    331.     left: 0;  
    332.     border: 20px solid #008bb0;  
    333.     -moz-border-radius: 50px 50px 0;  
    334.     border-radius: 50px 50px 0 50px;  
    335.     -webkit-transform: rotate(-45deg);  
    336.     -moz-transform: rotate(-45deg);  
    337.     -ms-transform: rotate(-45deg);  
    338.     -o-transform: rotate(-45deg);  
    339.     transform: rotate(-45deg);  
    340.    }  
    341.    #Infinity:after {  
    342.     left: auto;  
    343.     right: 0;  
    344.     -moz-border-radius: 50px 50px 50px 0;  
    345.     border-radius: 50px 50px 50px 0;  
    346.     -webkit-transform: rotate(45deg);  
    347.     -moz-transform: rotate(45deg);  
    348.     -ms-transform: rotate(45deg);  
    349.     -o-transform: rotate(45deg);  
    350.     transform: rotate(45deg);  
    351.    }  
    352.   
    353.    #CommentBubble {  
    354.       140px;  
    355.      height: 100px;  
    356.      margin: 30px 20px;  
    357.      float: left;  
    358.      background: #8867b9;  
    359.      position: relative;  
    360.      -moz-border-radius: 12px;  
    361.      -webkit-border-radius: 12px;  
    362.      border-radius: 12px;  
    363.    }  
    364.    #CommentBubble:before {  
    365.      content: "";  
    366.       0;  
    367.      height: 0;  
    368.      right: 100%;  
    369.      top: 38px;  
    370.      position: absolute;  
    371.      border-top: 13px solid transparent;  
    372.      border-right: 26px solid #8867b9;  
    373.      border-bottom: 13px solid transparent;  
    374.    }  
    375.   
    376.    #Diamonds{  
    377.       50px;  
    378.      height: 0;  
    379.      float: left;  
    380.      border-style: solid;  
    381.      border-color: transparent transparent #9aff02 transparent;  
    382.      border- 0 25px 25px 25px;  
    383.      position: relative;  
    384.      margin: 20px 0 50px 0;  
    385.    }  
    386.    #Diamonds:after{  
    387.       0;  
    388.      height: 0;  
    389.      top: 25px;  
    390.      left: -25px;  
    391.      border-style: solid;  
    392.      border-color: #9aff02 transparent transparent transparent;  
    393.      border- 70px 50px 0 50px;  
    394.      position: absolute;  
    395.      content: "";  
    396.     }  
    397.   
    398.     #EightDiagrams{  
    399.       96px;  
    400.      height: 48px;  
    401.      margin: 20px 20px;  
    402.      float: left;  
    403.      background-color: #ffffff;  
    404.      border-color: #000000;  
    405.      border-style: solid;  
    406.      border- 2px 2px 50px 2px;  
    407.      border-radius: 100%;  
    408.      position: relative;  
    409.     }  
    410.     #EightDiagrams:before {  
    411.       12px;  
    412.      height: 12px;  
    413.      top: 50%;  
    414.      left: 0;  
    415.      content: "";  
    416.      position: absolute;  
    417.      background-color: #ffffff;  
    418.      border: 18px solid #000000;  
    419.      border-radius: 100%;  
    420.     }  
    421.     #EightDiagrams:after {  
    422.       12px;  
    423.      height: 12px;  
    424.      top: 50%;  
    425.      left: 50%;  
    426.      background-color: #000000;  
    427.      border: 18px solid #ffffff;  
    428.      border-radius:100%;  
    429.      content: "";  
    430.      position: absolute;  
    431.     }  
    432.   
    433.     #PacMan {  
    434.       0;  
    435.      height: 0;  
    436.      float: left;  
    437.      border-right: 60px solid transparent;  
    438.      border-left: 60px solid #300fed;  
    439.      border-top: 60px solid #300fed;  
    440.      border-bottom: 60px solid #300fed;  
    441.      border-top-left-radius: 60px;  
    442.      border-top-right-radius: 60px;  
    443.      border-bottom-left-radius: 60px;  
    444.      border-bottom-right-radius: 60px;  
    445.     }  
    446.   
    447.     #Sector {  
    448.       0;  
    449.       height:0;  
    450.       float: left;  
    451.       background-color: #ffffff;  
    452.       border-left: 70px solid transparent;  
    453.       border-right: 70px solid transparent;  
    454.       border-top: 100px solid #ab9ed1;  
    455.       border-radius:50%;  
    456.     }  
    457.   
    458.     #CrescentMoon{  
    459.       80px;  
    460.       height:80px;  
    461.       float: left;  
    462.       background-color: #ffffff;  
    463.       border-radius:50%;  
    464.       box-shadow: 15px 15px 0 0 #9600d2;  
    465.     }  
    466.   
    467.     #TopLeftTriangle {  
    468.        0px;  
    469.       height: 0px;  
    470.       margin: 10px 10px;  
    471.       float: left;  
    472.       border-top: 100px solid #7efde1;  
    473.       border-right: 100px solid transparent;  
    474.     }  
    475.     #TopRightTriangle {  
    476.        0px;  
    477.       height: 0px;  
    478.       margin: 10px 10px;  
    479.       float: left;  
    480.       border-top: 100px solid #400526;  
    481.       border-left: 100px solid transparent;  
    482.     }  
    483.     #BottomLeftTriangle {  
    484.       0px;  
    485.      height: 0px;  
    486.      margin: 10px 10px;  
    487.      float: left;  
    488.      border-bottom: 100px solid #600ffe;  
    489.      border-right: 100px solid transparent;  
    490.     }  
    491.     #BottomRightTriangle {  
    492.       0px;  
    493.      height: 0px;  
    494.      margin: 10px 10px;  
    495.      float: left;  
    496.      border-bottom: 100px solid #ff7578;  
    497.      border-left: 100px solid transparent;  
    498.     }  
    499.   
    500.     #Burst8 {  
    501.       80px;  
    502.      height: 80px;  
    503.      margin: 10px 10px;  
    504.      float: left;  
    505.      background-color: #cf7668;  
    506.      position: relative;  
    507.      transform:rotate(20deg);  
    508.      -webkit-transform:rotate(20deg);  
    509.      -ms-transform:rotate(20deg);  
    510.      -moz-transform:rotate(20deg);  
    511.      -o-transform:rotate(20deg);  
    512.     }  
    513.     #Burst8:before{  
    514.       80px;  
    515.      height: 80px;  
    516.      top: 0;  
    517.      left: 0;  
    518.      background-color: #cf7668;  
    519.      position: absolute;  
    520.      content: "";  
    521.      transform:rotate(135deg);  
    522.      -webkit-transform:rotate(135deg);  
    523.      -ms-transform:rotate(135deg);  
    524.      -moz-transform:rotate(135deg);  
    525.      -o-transform:rotate(135deg);  
    526.     }  
    527.   
    528.     #Burst12 {  
    529.        80px;  
    530.       height: 80px;  
    531.       margin: 20px 20px;  
    532.       float: left;  
    533.       background-color: #a8ff26;  
    534.       position: relative;  
    535.       text-align: center;  
    536.     }  
    537.     #Burst12:before, #Burst12:after{  
    538.        80px;  
    539.       height: 80px;  
    540.       top: 0;  
    541.       left: 0;  
    542.       background-color: #a8ff26;  
    543.       position: absolute;  
    544.       content: "";  
    545.     }  
    546.     #Burst12:before{  
    547.       transform:rotate(30deg);  
    548.       -webkit-transform:rotate(30deg);  
    549.       -ms-transform:rotate(30deg);  
    550.       -moz-transform:rotate(30deg);  
    551.       -o-transform:rotate(30deg);  
    552.     }  
    553.     #Burst12:after{  
    554.       transform:rotate(60deg);  
    555.       -webkit-transform:rotate(60deg);  
    556.       -ms-transform:rotate(60deg);  
    557.       -moz-transform:rotate(60deg);  
    558.       -o-transform:rotate(60deg);  
    559.     }  
    560.   </style>  
    561. </head>  
    562. <body>  
    563.   <!-- 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半 -->  
    564.   <div id="Circle"></div>  
    565.   <!-- 椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半 -->  
    566.   <div id="Oval"></div>  
    567.   <!-- 三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid -->  
    568.   <div id="Triangle"></div>  
    569.   <!-- 倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid -->  
    570.   <div id="InvertedTriangle"></div>  
    571.   <!-- 左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid -->  
    572.   <div id="LeftTriangle"></div>  
    573.   <!-- 右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid -->  
    574.   <div id="RightTriangle"></div>  
    575.   <!-- 菱形：使用transform和rotate相结合，使两个正反三角形上下显示 -->  
    576.   <div id="Diamond"></div>  
    577.   <!-- 梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度 -->  
    578.   <div id="Trapezium"></div>  
    579.   <!-- 长方形：宽比高长 -->  
    580.   <div id="Rectangle"></div>  
    581.   
    582.   <!-- 浮动Div换行 -->  
    583.   <div style="clear:both">  
    584.   <!-- 正方形：宽和高相等 -->  
    585.   <div id="Square"></div>  
    586.   <!-- 圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同 -->  
    587.   <div id="Ring"></div>  
    588.   <!-- 平行四边形：使用transform使长方形倾斜一个角度 -->  
    589.   <div id="Parallelogram"></div>  
    590.   <!-- 五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边 -->  
    591.   <div id="FiveStar"></div>  
    592.   <!-- 六角星：使用transform属性来旋转不同的边 -->  
    593.   <div id="SixStar"></div>  
    594.   <!-- 五边形：可以采用三角形和梯形组合 -->  
    595.   <div id="Pentagon"></div>  
    596.   <!-- 六边形：在长方形上面和下面各放置一个三角形 -->  
    597.   <div id="Hexagon"></div>  
    598.   <!-- 八边形：在长方形上面和下面各放置一个梯形 -->  
    599.   <div id="Octagon"></div>  
    600.   <!-- 心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点 -->  
    601.   <div id="Heart"></div>  
    602.   
    603.   <!-- 浮动Div换行 -->  
    604.   <div style="clear:both">  
    605.   <!-- 蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性 -->  
    606.   <div id="Egg"></div>  
    607.   <!-- 无穷符号：通过border属性和设置伪元素的角度来实现 -->  
    608.   <div id="Infinity"></div>  
    609.   <!-- 消息提示框：一个圆角矩形加左边中间的一个小三角形 -->  
    610.   <div id="CommentBubble"></div>  
    611.   <!-- 钻石：上面一个梯形，下面一个三角形组成 -->  
    612.   <div id="Diamonds"></div>  
    613.   <!-- 八卦图：多个圆形的组合-->  
    614.   <div id="EightDiagrams"></div>  
    615.   <!-- 食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性-->  
    616.   <div id="PacMan"></div>  
    617.   <!-- 扇形：在三角形的基础上，让其中一边成弧形 -->  
    618.   <div id="Sector"></div>  
    619.   <!-- 月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙 -->  
    620.   <div id="CrescentMoon"></div>  
    621.   
    622.   <!-- 浮动Div换行 -->  
    623.   <div style="clear:both">  
    624.   <!-- 顶左直角三角形 -->  
    625.   <div id="TopLeftTriangle"></div>  
    626.   <!-- 顶右直角三角形 -->  
    627.   <div id="TopRightTriangle"></div>  
    628.   <!-- 底左直角三角形 -->  
    629.   <div id="BottomLeftTriangle"></div>  
    630.   <!-- 底右直角三角形 -->  
    631.   <div id="BottomRightTriangle"></div>  
    632.   <!-- 八角形 -->  
    633.   <div id="Burst8"></div>  
    634.   <!-- 十二角形 -->  
    635.   <div id="Burst12"></div>  
    636. </body>  
    637. </html>  

              多角形绘制比较复杂，比如五角星，八角形等。

          心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。 

          以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。

    文章引用路径：http://blog.csdn.net/wp1603710463/article/details/51180912
  • 相关阅读:
    08-Django模板（2）
    07-Django模板（1）
    06-Django视图
    05-Django模型（2）
    04-Django模型（1）
    03-Django基础概念和MVT架构
    16-增量式爬虫
    15-scrapy-redis两种形式分布式爬虫
    14-scrapy框架(CrawlSpider)
    Linux启动/停止/重启Mysql数据库的方法
  • 原文地址：https://www.cnblogs.com/zrbfree/p/5408722.html
Copyright © 2011-2022 走看看