laokdidiao
laokdidiao

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属性为宽度或高度的一半。

     效果图：

                    CSS3实现32种基本图形_第1张图片

[css]  view plain  copy
 print ?
  1. #Circle{  
  2.   width: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属性为高度除以高度一半。

    效果图：

                 CSS3实现32种基本图形_第2张图片

[css]  view plain  copy
 print ?
  1. #Oval {  
  2.    width: 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 ?
  1. #Triangle {  
  2.    width: 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。

    效果图：

             CSS3实现32种基本图形_第3张图片

[css]  view plain  copy
 print ?
  1. #InvertedTriangle {  
  2.    width: 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。

    效果图：

              CSS3实现32种基本图形_第4张图片

[css]  view plain  copy
 print ?
  1. #LeftTriangle {  
  2.   width: 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。

      效果图：

              CSS3实现32种基本图形_第5张图片

[css]  view plain  copy
 print ?
  1. #RightTriangle {  
  2.    width: 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相结合，使两个正反三角形上下显示。

     效果图：

           CSS3实现32种基本图形_第6张图片

[css]  view plain  copy
 print ?
  1. #Diamond {  
  2.   width: 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.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

    效果图：

              CSS3实现32种基本图形_第7张图片

[css]  view plain  copy
 print ?
  1. #Trapezium {  
  2.  height: 0;  
  3.  width: 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 ?
  1. #Rectangle {  
  2.  height: 50px;  
  3.  width: 100px;  
  4.  float: left;  
  5.  background: #afe05d;  
  6. }  

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

    效果图：

            CSS3实现32种基本图形_第8张图片

[css]  view plain  copy
 print ?
  1. #Square {  
  2.  height: 100px;  
  3.  width: 100px;  
  4.  float: left;  
  5.  background: #b02089;  
  6. }  

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

      效果图：

          CSS3实现32种基本图形_第9张图片

[css]  view plain  copy
 print ?
  1. #Ring {  
  2.  width: 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 ?
  1. #Parallelogram {  
  2.  width: 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属性来旋转不同的边。

      效果图：

         CSS3实现32种基本图形_第10张图片

[css]  view plain  copy
 print ?
  1. #FiveStar {  
  2.    width: 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.    width: 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.    width: 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属性来旋转不同的边。

     效果图：

           CSS3实现32种基本图形_第11张图片

[css]  view plain  copy
 print ?
  1. #SixStar{  
  2.   width: 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.   width: 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.六边形：在长方形上面和下面各放置一个三角形。

       效果图：

             CSS3实现32种基本图形_第12张图片   

[css]  view plain  copy
 print ?
  1. #Hexagon {  
  2.    width: 100px;  
  3.    height: 55px;  
  4.    float: left;  
  5.    background: #000001;  
  6.    position: relative;  
  7.    margin: 10px auto;  
  8.  }  
  9.  #Hexagon:before {  
  10.    content: "";  
  11.    width: 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.   width: 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 ?
  1. #Pentagon{  
  2.   width: 60px;  
  3.   float: left;  
  4.   position: relative;  
  5.   border-width: 52px 20px 0;  
  6.   border-style: solid;  
  7.   border-color: #711ee2 transparent;  
  8. }  
  9. #Pentagon:before{  
  10.   content: "";  
  11.   position: absolute;  
  12.   width: 0;  
  13.   height: 0;  
  14.   top: -92px;  
  15.   left: -20px;  
  16.   border-width: 0 50px 40px;  
  17.   border-style: solid;  
  18.   border-color: transparent transparent #711ee2;  
  19. }  

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

    效果图：

           CSS3实现32种基本图形_第13张图片

[css]  view plain  copy
 print ?
  1. #Octagon{  
  2.   width: 100px;  
  3.   height: 100px;  
  4.   float: left;  
  5.   margin: 10px 10px;  
  6.   background-color: #66e006;  
  7.   position: relative;  
  8.  }  
  9.  #Octagon:before{  
  10.   width: 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.   width: 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属性来设置元素的旋转中心点。

     效果图：

        CSS3实现32种基本图形_第14张图片

[css]  view plain  copy
 print ?
  1. #Heart {  
  2.   float: left;  
  3.   position: relative;  
  4.  }  
  5.  #Heart:before, #Heart:after {  
  6.   content: "";  
  7.   width: 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属性。

     效果图：

          CSS3实现32种基本图形_第15张图片

[css]  view plain  copy
 print ?
  1. #Egg {  
  2.   width: 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属性和设置伪元素的角度来实现。

     效果图：

             CSS3实现32种基本图形_第16张图片

[css]  view plain  copy
 print ?
  1. #Infinity {  
  2.   width: 220px;  
  3.   height: 100px;  
  4.   float: left;  
  5.   position: relative;  
  6.  }  
  7.  #Infinity:before, #Infinity:after {  
  8.   content: "";  
  9.   width: 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.消息提示框：一个圆角矩形加左边中间的一个小三角形。

     效果图：

           CSS3实现32种基本图形_第17张图片

[css]  view plain  copy
 print ?
  1. #CommentBubble {  
  2.    width: 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.    width: 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 ?
  1. #Diamonds{  
  2.   width: 50px;  
  3.   height: 0;  
  4.   float: left;  
  5.   border-style: solid;  
  6.   border-color: transparent transparent #9aff02 transparent;  
  7.   border-width: 0 25px 25px 25px;  
  8.   position: relative;  
  9.   margin: 20px 0 50px 0;  
  10. }  
  11. #Diamonds:after{  
  12.   width: 0;  
  13.   height: 0;  
  14.   top: 25px;  
  15.   left: -25px;  
  16.   border-style: solid;  
  17.   border-color: #9aff02 transparent transparent transparent;  
  18.   border-width: 70px 50px 0 50px;  
  19.   position: absolute;  
  20.   content: "";  
  21.  }  
       23.八卦图：多个圆形的组合。

       效果图：

          CSS3实现32种基本图形_第18张图片

[css]  view plain  copy
 print ?
  1. #EightDiagrams{  
  2.   width: 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-width: 2px 2px 50px 2px;  
  10.   border-radius: 100%;  
  11.   position: relative;  
  12.  }  
  13.  #EightDiagrams:before {  
  14.   width: 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.   width: 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等属性。

       效果图：

        CSS3实现32种基本图形_第19张图片

[css]  view plain  copy
 print ?
  1. #PacMan {  
  2.  width: 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.扇形：在三角形的基础上，让其中一边成弧形 。

       效果图：

          CSS3实现32种基本图形_第20张图片

[css]  view plain  copy
 print ?
  1. #Sector {  
  2.    width: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.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

        效果图：

            CSS3实现32种基本图形_第21张图片

[css]  view plain  copy
 print ?
  1. #CrescentMoon{  
  2.    width: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.顶左直角三角形。

       效果图：

          CSS3实现32种基本图形_第22张图片

[css]  view plain  copy
 print ?
  1. #TopLeftTriangle {  
  2.    width: 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.顶右直角三角形。

         效果图：

              CSS3实现32种基本图形_第23张图片

[css]  view plain  copy
 print ?
  1. #TopRightTriangle {  
  2.   width: 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.底左直角三角形。

        效果图：

              CSS3实现32种基本图形_第24张图片

[css]  view plain  copy
 print ?
  1. #BottomLeftTriangle {  
  2.   width: 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.底右直角三角形。

        效果图：

              CSS3实现32种基本图形_第25张图片

[css]  view plain  copy
 print ?
  1. #BottomRightTriangle {  
  2.   width: 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.八角形。

        效果图：

                  CSS3实现32种基本图形_第26张图片

[css]  view plain  copy
 print ?
  1. #Burst8 {  
  2.  width: 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.  width: 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.十二角形。

          效果图：

             CSS3实现32种基本图形_第27张图片

[css]  view plain  copy
 print ?
  1. #Burst12 {  
  2.    width: 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.    width: 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

      效果图：

       CSS3实现32种基本图形_第28张图片

[html]  view plain  copy
 print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>CSS3实现基本图形</title>  
  6.   <style>  
  7.    #Circle{  
  8.      width: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.      width: 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.      width: 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.      width: 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.      width: 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.      width: 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.     width: 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.     width: 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.     width: 100px;  
  87.     float: left;  
  88.     background: #afe05d;  
  89.    }  
  90.    #Square {  
  91.     height: 100px;  
  92.     width: 100px;  
  93.     float: left;  
  94.     background: #b02089;  
  95.    }  
  96.    #Ring {  
  97.     width: 100px;  
  98.     height: 100px;  
  99.     float: left;  
  100.     background-color: white;  
  101.     border-radius: 80px;  
  102.     border:5px #ffd700 solid;  
  103.    }  
  104.    #Parallelogram {  
  105.     width: 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.      width: 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.      width: 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.      width: 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.      width: 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.      width: 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.       width: 60px;  
  189.       float: left;  
  190.       position: relative;  
  191.       border-width: 52px 20px 0;  
  192.       border-style: solid;  
  193.       border-color: #711ee2 transparent;  
  194.     }  
  195.     #Pentagon:before{  
  196.       content: "";  
  197.       position: absolute;  
  198.       width: 0;  
  199.       height: 0;  
  200.       top: -92px;  
  201.       left: -20px;  
  202.       border-width: 0 50px 40px;  
  203.       border-style: solid;  
  204.       border-color: transparent transparent #711ee2;  
  205.     }  
  206.   
  207.     #Hexagon {  
  208.       width: 100px;  
  209.       height: 55px;  
  210.       float: left;  
  211.       background: #000001;  
  212.       position: relative;  
  213.       margin: 10px auto;  
  214.     }  
  215.     #Hexagon:before {  
  216.       content: "";  
  217.       width: 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.      width: 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.     width: 100px;  
  240.     height: 100px;  
  241.     float: left;  
  242.     margin: 10px 10px;  
  243.     background-color: #66e006;  
  244.     position: relative;  
  245.    }  
  246.    #Octagon:before{  
  247.     width: 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.     width: 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.     width: 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.     width: 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.     width: 220px;  
  321.     height: 100px;  
  322.     float: left;  
  323.     position: relative;  
  324.    }  
  325.    #Infinity:before, #Infinity:after {  
  326.     content: "";  
  327.     width: 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.      width: 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.      width: 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.      width: 50px;  
  378.      height: 0;  
  379.      float: left;  
  380.      border-style: solid;  
  381.      border-color: transparent transparent #9aff02 transparent;  
  382.      border-width: 0 25px 25px 25px;  
  383.      position: relative;  
  384.      margin: 20px 0 50px 0;  
  385.    }  
  386.    #Diamonds:after{  
  387.      width: 0;  
  388.      height: 0;  
  389.      top: 25px;  
  390.      left: -25px;  
  391.      border-style: solid;  
  392.      border-color: #9aff02 transparent transparent transparent;  
  393.      border-width: 70px 50px 0 50px;  
  394.      position: absolute;  
  395.      content: "";  
  396.     }  
  397.   
  398.     #EightDiagrams{  
  399.      width: 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-width: 2px 2px 50px 2px;  
  407.      border-radius: 100%;  
  408.      position: relative;  
  409.     }  
  410.     #EightDiagrams:before {  
  411.      width: 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.      width: 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.      width: 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.       width: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.       width: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.       width: 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.       width: 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.      width: 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.      width: 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.      width: 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.      width: 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.       width: 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.       width: 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

你可能感兴趣的:(css3,图形)

  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • CentOS 7官方源停服，配置本机光盘yum源 码哝小鱼 linux运维centoslinux运维
    1、挂载系统光盘mkdir/mnt/isomount-oloop/tools/CentOS-7-x86_64-DVD-1810.iso/mnt/isocd/mnt/iso/Packages/rpm-ivh/mnt/iso/Packages/yum-utils-1.1.31-50.el7.noarch.rpm(图形界面安装，默契已安装）如安装yum-utils依赖错误，按提示安装依赖包rpm-ivh
  • 利用python实现图片格式之间的相互转换 难得北窗高卧 python开发语言
    一、概要图片一般有多种格式，常见的图片格式包括：JPEG（.jpg或.jpeg）：一种广泛使用的有损压缩格式，适用于摄影图像和网页上的图片。PNG（.png）：一种无损压缩格式，支持透明度和更好的图像质量，常用于图标、图形和需要透明背景的图片。该图片是4通道的，外加一个透明通道。如截屏GIF（.gif）：一种支持动画和透明度的格式，常用于简单的动画和图标。BMP（.bmp）：一种无损格式，存储图像
  • JAVA·一个简单的登录窗口 MortalTom java开发语言学习
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
  • Python数据分析与可视化 jun778895 python数据分析开发语言
    Python数据分析与可视化是一个涉及数据处理、分析和以图形化方式展示数据的过程，它对于数据科学家、分析师以及任何需要从数据中提取洞察力的专业人员来说至关重要。以下将详细探讨Python在数据分析与可视化方面的应用，包括常用的库、数据处理流程、可视化技巧以及实际应用案例。一、Python数据分析与可视化的重要性数据可视化是将数据以图形或图像的形式表示出来，以便人们能够更直观地理解数据背后的信息和规
  • 【Python】tkinter及组件如何使用 小九不懂SAP 我的Python日记python开发语言tkinter
    一、tkinter的应用场景tkinter是Python的标准GUI（图形用户界面）库，它提供了丰富的控件和工具，使得开发者能够轻松创建跨平台的桌面应用程序。以下是一些tkinter的常见应用场景：桌面应用程序开发：开发者可以使用tkinter来创建各种桌面应用程序，如文本编辑器、计算器、图片查看器、游戏等。这些应用程序可以具有复杂的用户界面，包括窗口、按钮、文本框、下拉菜单、滚动条等。数据可视化
  • svg图片兼容性和用法优缺点 独行侠_ef93
    svg图片的使用方法第一次来认认真真的研究了下svg图片，之前只是在网上见过，但都是一晃而过也没当回事，最近网站改版看到同事有用到svg格式的图片，想想自己干了几年的重构也没用过，这些细节的知识是应该好好研究研究了。暂时还没研究得完全透切，先记下目前为止所看到的吧不然又给忘了。svg可缩放矢量图形（ScalableVectorGraphics），顾名思义就是任意改变其大小也不会变形，是基于可扩展标
  • 【中国国际航空-注册_登录安全分析报告】 风控牛 验证码接口安全评测系列安全行为验证极验网易易盾智能手机
    前言由于网站注册入口容易被黑客攻击，存在如下安全问题：1.暴力破解密码，造成用户信息泄露2.短信盗刷的安全问题，影响业务及导致用户投诉3.带来经济损失，尤其是后付费客户，风险巨大，造成亏损无底洞所以大部分网站及App都采取图形验证码或滑动验证码等交互解决方案，但在机器学习能力提高的当下，连百度这样的大厂都遭受攻击导致点名批评，图形验证及交互验证方式的安全性到底如何？请看具体分析一、中国国际航空PC
  • matlab设置图像窗口大小,matlab 图形窗口大小的设置 weixin_39534002 matlab设置图像窗口大小
    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%常用选项和小技巧%%%%%%画等值线[cchh]=contour(peaks(30),'LINESPEC','b-')clabel(cc,hh,'manual')%写文本text(5,10,'\bfmath\slmath\itmath\rmmath\alpha','color',[0.10.10.9],'fonts
  • matlab游标标注移动,matlab实现图形窗口的数据游标 莫白想 matlab游标标注移动
    DatacursorsforfigurewindowSeveralrelatedfunctions:CreateCursorsetsupaverticalcursoronallaxesinafigure.Thecursorscanbemovedaroundusingthemouse.MultiplecursorsaresupportedineachfigureGetCursorLocationre
  • 两种方法判断Python的位数是32位还是64位 sanqima Python编程电脑python开发语言
      Python从1991年发布以来，凭借其简洁、清晰、易读的语法、丰富的标准库和第三方工具，在Web开发、自动化测试、人工智能、图形识别、机器学习等领域发展迅猛。  Python是一种胶水语言，通过Cython库与C/C++语言进行链接，通过Jython库与Java语言进行链接。  Python是跨平台的，可运行在多种操作系统上，包括但不限于Windows、Linux和macOS。这意味着用Py
  • Swift4.0: 利用图形上下文画基础图? Dayu大鱼
    步骤:开启图片上下文获取上下文配置上下文3.1填充颜色cgColor3.2填充尺寸从图形上下文中获取图片关闭上下文返回图片importFoundationimportUIKitextensionUIImage{///画一个白色背景的图片classfuncimageWithWhiteBackGroundColor()->UIImage{//开始图形上下文UIGraphicsBeginImageCon
  • 主流行架构 rainbowcheng 架构架构
    nexus，gitlab,svn,jenkins,sonar,docker，apollo，catteambition，axure，蓝湖，禅道,WCP；redis，kafka，es，zookeeper，dubbo，shardingjdbc，mysql，InfluxDB，Telegraf，Grafana，Nginx，xxl-job，Neo4j,NebulaGraph是一个高性能的,NOSQL图形数据库
  • Day25_0.1基础学习MATLAB学习小技巧总结（25）——四维图形的可视化 非常规定义M 0.1基础学习MATLAB学习matlab开发语言SIMULINK数学建模
    利用空闲时间把碎片化的MATLAB知识重新系统的学习一遍，为了在这个过程中加深印象，也为了能够有所足迹，我会把自己的学习总结发在专栏中，以便学习交流。参考书目：1、《MATLAB基础教程(第三版)(薛山)》2、《MATLABR2020a完全自学一本通》之前的章节都是基础的数据运算用法，对于功课来说更加重要的内容是建模、绘图、观察数据趋势，接下来我会结合自己的使用经验，来为大家分享绘图、建模使用的小
  • WPF绘图(基础图形：直线、矩形和椭圆) 未来无限 C#WPF程序设计wpf绘图直线矩形椭圆
    目录一、概述二、基本图形绘制2.1直线2.2矩形2.3椭圆一、概述与传统的.NET开发使用GDI+进行绘图不同，WPF拥有自己的一套图形API，绘图为矢量图。绘图可以在任何一种布局控件中完成，wpf会根据容器计算相应坐标。最常用的是Canvas和Grid。基本图形包括以下几个，都是Shaper类的派生类。1、Line，直线段，可以设置Stroke2、Rectangle，有Stroke也有Fill3
  • PDF怎么测量尺寸 时间的回忆88
    PDF文件在使用的时候里面也会有图片与图形，我们需要测量其中尺寸的时候应该怎么做呢？估计各位小伙伴们也都很好奇吧，今天就一起来看看吧！1.首先要选择合适的PDF编辑软件，百度里搜索PDF编辑器http://bianji.xjpdf.com/，然后把这款软件安装在电脑中。编辑器安装完成之后打开运行迅捷PDF编辑器，在编辑器中打开需要测量的PDF图纸文件。2.尺寸的测量需要测量工具，找到编辑器中的工具
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • 操作系统简介 像风一样自由2020 操作系统linuxubuntuwindowsharmonyos
    操作系统简介操作系统（OperatingSystem，简称OS）是管理计算机硬件和软件资源的系统软件，为用户和应用程序提供接口。现今，操作系统种类繁多，主要分为桌面操作系统、服务器操作系统和移动操作系统等。以下是对目前存在的主要操作系统的详细介绍。1.Windows简介：Windows是由微软公司开发的系列图形界面操作系统，是全球使用最广泛的桌面操作系统之一。最新版本：截至2023年10月，最新版
  • R 数据可视化 —— 韦恩图 名本无名
    前言对于数据集之间交叠关系的可视化，通常想到的是绘制韦恩图。韦恩图是一种关系型图表，通过图形之间的重叠来反映数据集之间的相交关系。下面，我们来简单介绍一下如何绘制韦恩图韦恩图绘制韦恩图的包有很多，比如gplots包的venn()函数、limma包的vennDiagram()函数、venneuler包的venneuler()函数。但是这些包绘制出来的图像效果都不是很好，所以我们使用比较成熟的包Ven
  • 座舱交互的下一个时代 高工智能汽车 交互物联网人工智能
    为了满足座舱信息娱乐的更高性能要求，几乎所有的一线品牌都在准备“换芯”。去年开始，不少车型开始推动传统的分布式座舱仪表和中控电子架构进入域控制器时代，高通成为大赢家。今年6月，特斯拉也正式官宣，即将推出的新款ModelS将配备能够运行PS5游戏机性能的AMD芯片，包括专门定制的AMDRyzenCPU和独立的Navi23图形处理器。最新消息，特斯拉将率先在中国市场生产的ModelY高性能版车型换装A
  • matlab上下标如何输入,在Matlab中怎样输入特殊符号或者上标、下标 李一舟DESIGN matlab上下标如何输入
    Matlab的text/title/xlabel/ylabel对象支持简单的TeX排版语法，如希腊字母，上下标等例如text(0.5,0.5,'\alpha^\beta_2');Matlab图形中允许用TEX文件格式来显示字符。使用\bf，\it，\rm表示黑体，斜体，正体字符，特别注意大括号{}的用法。实例：在存在的图形上写一段有黑体、有斜体、有整体的句子。1、画图x=0:0.01:8;y=si
  • 【QT教程】QT6硬件图形界面编程 QT硬件编程 QT性能优化QT原理源码QT界面美化 qtqt6.3qt5c++QT教程
    QT6硬件图形界面编程使用AI技术辅助生成QT界面美化视频课程QT性能优化视频课程QT原理与源码分析视频课程QTQMLC++扩展开发视频课程免费QT视频课程您可以看免费1000+个QT技术视频免费QT视频课程QT统计图和QT数据可视化视频免费看免费QT视频课程QT性能优化视频免费看免费QT视频课程QT界面美化视频免费看1QT6硬件图形界面编程概述1.1QT6硬件图形界面编程简介1.1.1QT6硬件
  • Android 11.0 camera2关于拍照预览方向旋转90度和拍照图片镜像功能实现 安卓兼职framework应用工程师 android11.0Rom定制化高级进阶android旋转拍照方向旋转90度拍照拍照旋转90度拍照镜像
    1.前言在11.0的系统rom产品定制化开发中，在camera2的一些图形图像中有些是不正常的功能，比如在拍照和预览画面和手机屏幕不一致，或者在保存拍照图片的时候发现图片翻转保存了等问题，所以就需要分析下相关的问题来解决实现功能2.camera2关于拍照预览方向旋转90度和拍照图片镜像功能实现的核心类packages\apps\Camera2\src\com\android\camera\one\
  • css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
    css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
  • css3实现鼠标放到图标上自动切换图标 黄丫丫07 csscss3html
    作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
  • CSS实现鼠标移动到购物车显示详情 AsiaFT. csscss3html
    需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
  • Java基础一 十一路客 java开发语言
    哔哩哔哩Java开发工程师面试该如（）何准备？-知乎一.JavaOOP面试题(1)什么是B/S架构?什么是C/S架构Java都有那些开发平台?B/S(Browser/Server)，浏览器/服务器程序C/S(Client/Server)，客户端/服务端，桌面应用程序1、C/S和B/S各有优势，C/S在图形的表现能力上以及运行的速度上肯定是强于B/S模式的，不过缺点就是他需要运行专门的客户端，而且更
  • Unreal Engine——AI生成高精度的虚拟人物和环境（虚拟世界构建、电影场景生成）（二）（技术分析） 爱研究的小牛 AIGC—虚拟现实人工智能虚幻游戏引擎AIGC
    UnrealEngine（虚幻引擎）是业界领先的3D实时渲染引擎，广泛应用于游戏开发、影视制作、建筑可视化和虚拟现实等领域。其核心技术实现涵盖了多项复杂的功能模块，包括图形渲染、物理引擎、动画系统、音效系统和网络系统等。1.图形渲染技术UnrealEngine的图形渲染系统非常强大，支持实时渲染复杂的3D场景，生成高品质的视觉效果。虚幻引擎使用先进的渲染管线，主要分为以下几个方面：1.1渲染管线虚
  • python编程一个最简单游戏,python最简单的游戏代码 gpt886 pygamepython开发语言人工智能
    大家好，小编为大家解答python编程一个最简单游戏代码的问题。很多人还不知道python编程一个最简单游戏，现在让我们一起来看看吧！前言初识pygame：pie游戏pygame游戏库使得如下功能成为可能：绘制图形、获取用户输入、执行动画以及使用定时器让游戏按照稳定的帧速率运行。使用pygame库；以一定字体打印文本；使用循环来重复动作；绘制圆、矩形、线条和户型；创建pie游戏；【----帮助Py
  • java责任链模式 3213213333332132 java责任链模式村民告县长
    责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。 就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。 下面代码模拟这样的效果： 创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** *
  • linux、mysql、nginx、tomcat 性能参数优化 ronin47
    一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大
  • php命令行界面 dcj3sjt126com PHPcli
    常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块 执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("
  • Filter&Session 171815164 session
    Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge
  • 连接池与Spring,Hibernate结合 g21121 Hibernate
            前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。         1.下载相关内容：     &nb
  • [简单]mybatis判断数字类型 53873039oycg mybatis
           昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下:       Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis
  • 项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space 程序员是怎么炼成的 eclipsejvmtomcatcatalina.sheclipse.ini
       在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space.     解决办法是点击eclipse里的tomcat，在
  • 我的crm小结 aijuans crm
    各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主
  • spring里配置使用hibernate的二级缓存几步 antonyup_2006 javaspringHibernatexmlcache
    ．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi
  • JAVA基础面试题 百合不是茶 抽象实现接口String类接口继承抽象类继承实体类自定义异常
    /*   * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、   *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于   * 寄存器（register），快于堆。堆（heap）：用于存储对象。   */  &
  • 让sqlmap文件 "继承" 起来 bijian1013 javaibatissqlmap
            多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用 ，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项
  • 精通Oracle10编程SQL(13)开发触发器 bijian1013 oracle数据库plsql
    /* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O
  • 【EhCache三】EhCache查询 bit1129 ehcache
    本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。   要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性   数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu
  • CXF框架入门实例 白糖_ springWeb框架webserviceservlet
    CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。 它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。 在apache cxf官网提供
  • angular.equals boyitech AngularJSAngularJS APIAnguarJS 中文APIangular.equals
    angular.equals   描述: 比较两个值或者两个对象是不是 相等。还支持值的类型，正则表达式和数组的比较。   两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项： 两个值或者对象能通过=== （恒等） 的比较 两个值或者对象是同样类型，并且他们的属性都能通过angular
  • java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1] bylijinnan java
    这道题的具体思路请参看 何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A
  • FastDFS 的安装和配置 修订版 Chen.H linuxfastDFS分布式文件系统
    FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.
  • [强人工智能]拓扑扫描与自适应构造器 comsci 人工智能
          当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢?       那么,现在我们必须设计新的模块和代码包来处理上面的问题
  • oracle merge into的用法 daizj oraclesqlmerget into
    Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE
  • 不适合使用Hadoop的场景 datamachine hadoop
    转自：http://dev.yesky.com/296/35381296.shtml。 　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop!  实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha
  • YII findAll的用法 dcj3sjt126com yii
    看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10));   第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值； 更完善的查询需要
  • vim 常用 NERDTree 快捷键 dcj3sjt126com vim
    下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。 切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳
  • Java把目录下的文件打印出来 蕃薯耀 列出目录下的文件文件夹下面的文件目录下的文件
    Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:
  • linux远程桌面----VNCServer与rdesktop hanqunfeng Desktop
    windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。   linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。   下面分别介绍，以windo
  • guava中的join和split功能 jackyrong java
    guava库中，包含了很好的join和split的功能，例子如下： 1） 将LIST转换为使用字符串连接的字符串    List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom");
  • Web开发技术十年发展历程 lampcy androidWeb浏览器html5
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • 架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好) nannan408 buffer
    1.前言。   如题。 2.代码。   IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession
  • ORA-00054:resource busy and acquire with NOWAIT specified Everyday都不同 oraclesessionLock
    [Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。   step1，查看被lock的session：   select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj
  • javascript学习笔记 tntxia JavaScript
      javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是
  • Java enum的用法详解 xieke90 enum枚举
    Java中枚举实现的分析：     示例：  public static enum SEVERITY{ INFO,WARN,ERROR }     enum很像特殊的class，实际上enum声明定义的类型就是一个类。 而这些类都是类库中Enum类的子类      (java.l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他