CSS 新属性 clip-path，意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形。

clip-path 通过定义特殊的路径，实现我们想要的图形。而这个路径，正是 SVG 中的 path 。

clip-path  属性api:

/* Keyword values */

clip-path: none;

/* Image values */

clip-path: url(resources.svg#c1);

/* Box values

clip-path: fill-box;

clip-path: stroke-box;

clip-path: view-box;

clip-path: margin-box

clip-path: border-box

clip-path: padding-box

clip-path: content-box

/* Geometry values */

/*矩形可以2个值， 也可 4个值    top right bottom left

   矩形可以3个值  第一个值 大小 第二值圆角属性【round】  第三个值圆角大小

*/

clip-path: inset(100px 50px);

 /*圆形  第一个值大小  第二值 左右水平位置  第三个上下垂直 位置*/

clip-path: circle(50px at 0 100px);   /* */

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */

clip-path: padding-box circle(50px at 0 100px);

/* Global values */

clip-path: inherit;

clip-path: initial;

clip-path: unset;

例如 clip-path: circle(50px at 50px 50px) 表示在元素的 （50px, 50px）处，裁剪生成一个半径为 50px 的圆，以元素的左上角为坐标起点

而整个 clip-path 属性，最为重要的当属 polygon，可以利用 polygon 生成任意多边形, polygon 几对【x,y】几边形，值可以 是百分比，也可以使用具体的数值。

下面分别列举使用 clip-path 生成一个圆形和一个十边形：

/* 圆形 */

.circle {

  width: 100px;

  height: 100px;

  background-color: yellowgreen;

  clip-path: circle(50px at 50px 50px);

}

/* 十边形 */

.polygon {

  width: 100px;

  height: 100px;

  background-color: yellowgreen;

  /*polygon(x1,y1,x2,y2...)*/

  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);

}

clip-path 动画

clip-path 另外一个强大之处在于可以进行 CSS transtion 与 CSS animation，也就是过渡和动画。

<div class="polygon-animate"></div> /* 几何图形变换 polygon 坐标位置可以去http://bennettfeely.com/clippy/ 获取 如果页面打开过慢 或点击图像选择不了请 使用翻墙软件 */
 .polygon-animate {

  position: absolute;

  width: 200px;

  height: 200px;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  background-color: crimson;

  -webkit-transition: .3s;

  transition: .3s;

  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);

          clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);

  -webkit-animation: polygon-ani 5s linear infinite;

          animation: polygon-ani 5s linear infinite;

}

@-webkit-keyframes polygon-ani {

  10% {

    background-color: darkorange;

    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);

            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);

  }

  14% {

    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);

            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);

  }

  24% {

    background-color: lemonchiffon;

    -webkit-clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);

            clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);

  }

  28% {

    -webkit-clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);

            clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);

  }

  38% {

    background-color: darkturquoise;

    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);

            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);

  }

  42% {

    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);

            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);

  }

  52% {

    background-color: darkcyan;

    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);

            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);

  }

  56% {

    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);

            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);

  }

  66% {

    background-color: deepskyblue;

    -webkit-clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

            clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

  }

  70% {

    -webkit-clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

            clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

  }

  80% {

    background-color: indigo;

    -webkit-clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);

            clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);

  }

  84% {

    -webkit-clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);

            clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);

  }

  94% {

    background-color: crimson;

    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);

            clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);

  }

}

@keyframes polygon-ani {

  10% {

    background-color: darkorange;

    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);

            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);

  }

  14% {

    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);

            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);

  }

  24% {

    background-color: lemonchiffon;

    -webkit-clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);

            clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);

  }

  28% {

    -webkit-clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);

            clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);

  }

  38% {

    background-color: darkturquoise;

    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);

            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);

  }

  42% {

    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);

            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);

  }

  52% {

    background-color: darkcyan;

    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);

            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);

  }

  56% {

    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);

            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);

  }

  66% {

    background-color: deepskyblue;

    -webkit-clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

            clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

  }

  70% {

    -webkit-clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

            clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

  }

  80% {

    background-color: indigo;

    -webkit-clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);

            clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);

  }

  84% {

    -webkit-clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);

            clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);

  }

  94% {

    background-color: crimson;

    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);

            clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);

  }

}

css

除此之外，我们还可以尝试，将一个完整的图形，分割成多个小图形

<hgroup class="triangle2rect">

    <div class="a"></div>

    <div class="b"></div>

    <div class="c"></div>

    <div class="d"></div>

</hgroup>
.triangle2rect {

    position: absolute;

    width: 100px;

    height: 100px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    animation: aniContainer 2s infinite alternate;

}

.triangle2rect div {

    position: absolute;

    top:;

    left:;

    width: 100%;

    height: 100%;

}

.a {

    background: deeppink;

    clip-path: polygon(0% 0%, 0% 100%, 50% 50%);

    animation: a 2s infinite alternate;

}

.b {

    background: deeppink;

    clip-path: polygon(0% 0%, 100% 0%, 50% 50%);

    animation: b 2s infinite alternate;

}

.c {

    background: deeppink;

    clip-path: polygon(100% 0%, 100% 100%, 50% 50%);

    animation: c 2s infinite alternate;

}

.d {

    background: deeppink;

    clip-path: polygon(100% 100%, 0% 100%, 50% 50%);

    animation: d 2s infinite alternate;

}

@keyframes a {

    0%, 10% {

        background: deeppink;

        clip-path: polygon(0% 0%, 0% 100%, 50% 50%);

    }

    90%, 100% {

        background: #000;

        clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);

    }

}

@keyframes b {

    0%, 10% {

        background: deeppink;

        clip-path: polygon(0% 0%, 100% 0%, 50% 50%);

    }

    90%, 100% {

        background: #000;

        clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);

    }

}

@keyframes c {

    0%, 10% {

        background: deeppink;

        clip-path: polygon(100% 0%, 100% 100%, 50% 50%);

    }

    90%, 100% {

        background: #000;

        clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);

    }

}

@keyframes d {

    0%, 10% {

        background: deeppink;

        clip-path: polygon(100% 100%, 0% 100%, 50% 50%);

    }

    90%, 100% {

        background: #000;

        clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);

    }

}

@keyframes aniContainer {

    0%, 10% {

        width: 100px;

        height: 100px;

    }

    90%, 100% {

        width: 250px;

        height: 60px;

    }

}

css

clip-path 动画的局限

clip-path 动画虽然美好，但是存在一定的局限性，那就是进行过渡的两个状态，坐标顶点的数量必须一致。

也就是如果我希望从三角形过渡到矩形。假设三角形和矩形的 clip-path 分别为：

  • 三角形：clip-path: polygon(50% 0, 0 100%, 100% 0)
  • 矩形： clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)

进行过渡动画时候，直接从 polygon(50% 0, 0 100%, 100% 0) --> polygon(0 0, 100% 0, 100% 100%, 0 100%) 是不行的，因为是从 3 个坐标点变换到 4 个坐标点。

因此这里需要这用一个讨巧的办法，在三角形的表示方法中，使用四个坐标点表示，其中两个坐标点进行重合即可。也就是：

  • 三角形：clip-path: polygon(50% 0, 0 100%, 100% 0) -> clip-path: polygon(50% 0, 50% 0, 0 100%, 100% 0)

N边形过渡动画

如果脑洞够大，随机生成 N（N>=1000）边形  //只是随机生成了 2000 个坐标点，然后使用 clip-path 将这些坐标点连接起来，并不是符合要求的多边形

https://codepen.io/Chokcoco/pen/XgJRzO?editors=1010

<div></div>
div {

    width: 300px;

    height: 300px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    transition: all .5s;

    transition-timing-function: cubic-bezier(.92,-0.5,1,.12);

    border-radius: 50%;

}

Css

 setInterval(function() {

     const length = 2000;

     let el = document.querySelectorAll("div")[0];

     let coordinate = "";

     for (let i = 0; i < length; i++) {

         coordinate +=

             parseInt(Math.random() * 10000) / 100 +

             "% " +

             parseInt(Math.random() * 10000) / 100 +

             "%, ";

     }

     coordinate = "polygon(" + coordinate.slice(0, -2) + ")";

     el.style.clipPath = coordinate;

     el.style.backgroundColor =

         "#" + (~~(Math.random() * (1 << 24))).toString(16);

 }, 500);

JavaScript

改良后的 (VUE官网)  https://codepen.io/Chokcoco/pen/NgqGOo?editors=1111

 <div id="app">

     <!-- 使用 clip-path -->

     <div id="svgpolygon" v-bind:style="styleObject"></div>

     <label>Sides: {{ sides }}</label>

     <input type="range" min="3" max="500" v-model.number="sides">

     <label>Minimum Radius: {{ minRadius }}%</label>

     <input type="range" min="0" max="90" v-model.number="minRadius">

     <label>Update Interval: {{ updateInterval }} milliseconds</label>

     <input type="range" min="10" max="2000" v-model.number="updateInterval">

 </div>

Html

 #svgpolygon {

     display: block;

     width: 180px;

     height: 180px;

     border-radius: 50%;

     border: 1px solid #333;

 }

 input[type="range"] {

   display: block;

   width: 100%;

   margin-bottom: 15px;

 }

Css

 new Vue({

     el: "#app",

     data: function() {

         var defaultSides = 500;

         var stats = Array.apply(null, { length: defaultSides }).map(function() {

             return 100;

         });

         return {

             stats: stats,

             points: generatePoints(stats),

             sides: defaultSides,

             minRadius: 50,

             interval: null,

             updateInterval: 500

         };

     },

     computed: {

         styleObject: function() {

             return {

                 background: '#41B883',

                 'clip-path': 'polygon(' + this.points +')'

             }

         }

     },

     watch: {

         sides: function(newSides, oldSides) {

             var sidesDifference = newSides - oldSides;

             if (sidesDifference > 0) {

                 for (var i = 1; i <= sidesDifference; i++) {

                     this.stats.push(this.newRandomValue());

                 }

             } else {

                 var absoluteSidesDifference = Math.abs(sidesDifference);

                 for (var i = 1; i <= absoluteSidesDifference; i++) {

                     this.stats.shift();

                 }

             }

         },

         stats: function(newStats) {

             TweenLite.to(this.$data, this.updateInterval / 1000, {

                 points: generatePoints(newStats)

             });

         },

         updateInterval: function() {

             this.resetInterval();

         }

     },

     mounted: function() {

         this.resetInterval();

     },

     methods: {

         randomizeStats: function() {

             var vm = this;

             this.stats = this.stats.map(function() {

                 return vm.newRandomValue();

             });

         },

         newRandomValue: function() {

             return Math.ceil(

                 this.minRadius + Math.random() * (100 - this.minRadius)

             );

         },

         resetInterval: function() {

             var vm = this;

             clearInterval(this.interval);

             this.randomizeStats();

             this.interval = setInterval(function() {

                 vm.randomizeStats();

             }, this.updateInterval);

         }

     }

 });

 function valueToPoint(value, index, total) {

     var x = 0;

     var y = -value * 0.9;

     var angle = Math.PI * 2 / total * index;

     var cos = Math.cos(angle);

     var sin = Math.sin(angle);

     var tx = x * cos - y * sin + 100;

     var ty = x * sin + y * cos + 100;

     return { x: tx, y: ty };

 }

 function generatePoints(stats) {

     var total = stats.length;

     var points = stats

         .map(function(stat, index) {

             var point = valueToPoint(stat, index, total);

             return point.x + "px " + point.y +"px,";

         })

         .join(" ");

     points = points.slice(0, -1);

     return points;

 }

JavaScript

奇妙的 clip-path 几何图形的更多相关文章

  1. CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

  2. 理解Clip Path

    http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html http://www.cnblogs.com/coco1s/p/602 ...

  3. HTML5 Canvas 绘图

    首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...

  4. 转：【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  5. CSS的clip-path 一

    首先介绍一下,我觉得前端开发都是很具有分享精神的,很多人都写出了很多优秀的总结经验供新手们参考,本人只是个搬运工,将别人优秀的文章进行了总结,本文主要转载自  大漠  的文章  http://www. ...

  6. .Net资源总结

    源码文档见官方群(以下为7.4更新内容) 逆天工具 CDN 资源库 国内 Bootstrap中文网开源项目免费 CDN 服务 360网站卫士常用前端公共库CDN服务 百度静态资源公共库 新浪云计算CD ...

  7. CSS的clip-path

    在Web网页中主要是以矩形分布的.而平面媒体则倾向于更多不同的形状.造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容.这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将付出巨 ...

  8. SVG基本图形及clipPath;

    利用SVG可以实现很多复杂的图形,SVG的功能开发者们已经开发许多,今天初识一下SVG的基本图形绘制, <svg viewbox="0,0,400,400" style=&q ...

  9. CSS3/SVG clip-path路径剪裁遮罩属性简介

    一.SVG属性和CSS3属性千丝万缕的关系 CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属 ...

  10. CSS的clip-path(转)

    基本概念 clip-path从单词"clip path"的直译上来说,表示的就是裁剪路径.既然有裁剪,咱们就来了解这里面的几个简单的概念. 裁剪就是从某样东西剪切一块.比如说,我们 ...

随机推荐

  1. XE Button Color

    XE Button Color,FMX Button 颜色 也可以放个rectangle+Glyph控件. http://blogs.embarcadero.com/sarinadupont/2014 ...

  2. 部署和调优 2.9 mysql主从配置-3

    测试 先给主mysql解锁 > unlock tables; 删除一个表 > use db1; > show tables; > drop table help_categor ...

  3. 每天一道算法题(11)——栈的push、pop 序列

    题目:输入两个整数序列.其中一个序列表示栈的push 顺序,判断另一个序列有没有可能是对应的pop 顺序.为了简单起见,我们假设push 序列的任意两个整数都是不相等的. 例如:输入的push 序列是 ...

  4. 分布式锁1 Java常用技术方案【转载】

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.所以自己结合实际工作中的一些经验和网上看到的一些资 ...

  5. GUI编程02

    1 编写一个导航栏 from tkinter import * root = Tk() root.title("测试") root.geometry("400x400+4 ...

  6. 业务逻辑: Quartz的整合应用

    1. 请谈一下你对Quartz的理解 思路:根据他解决的什么问题方面去阐述 2. 完成quartz和spring的整合应用 思路:触发时间.任务调度工程 步骤: 1. 创建maven工程,并导入qua ...

  7. Boost log中的几个问题

    1. 使用动态库时,要定义 BOOST_LOG_DYN_LINK  或者 BOOST_ALL_DYN_LINK 否则会出现如下错误: CMakeFiles/xxxx.dir/xxxx.cpp.o: I ...

  8. 树莓派研究笔记（2）-- 安装Nginx 服务器，PHP 和 SQLite

    1. 安装nginx web 服务器 sudo apt-get install nginx 2. 启动nginx,nginx的www目录默认在/usr/share/nginx/html中 sudo / ...

  9. Bootstrap 组件之 List group

    简介 List group 指列表.当然,Bootstrap 列表不局限于由 <ul> 和 <li> 标签构成的. Bootstrap 中一共三种列表的构成方式,这里 有一个例 ...

  10. linux没有wifi

    linux的wifi出现问题的介绍 几次重装linux系统,经常出现没有wifi的状况 错误详情 之前安装过CentOS,Kylin,OpenSU,等等经常出现没有wifi的状况,虽说猜测是遇到驱动问 ...