CSS中图形剪切、遮罩功能-及使用说明
Firefox54发布后，本来已经很酷的CSS属性，又增添新军：clip-path（裁减路径）。clip-path属性能让你裁剪（剪掉）一个元素中的指定区域。过去，你只能用SVG裁切元素。但在Firefox54推出后，你将可绘制出各式各样的CSS图形：insets,circles,ellipses和polygons！注意：这篇文章包含许多演示，需要支持clip-path和mask。为了能够在本文中看到每个演示，并与之交互，您需要使用Firefox54或更高版本。基本使用考虑到clip-path不接受“img”作为一个输入，而是作为
CSS的总结
css1.CSS的特点CSS（CascadingStyleSheets）中文全称为层叠样式表。他是一种样式表语言用来描述HTML或者是XML文档中的呈现。CSS描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。然而写过页面的同学都会认为CSS其实并不是像想象中的那样简单，各种样式之间擦杂，当页面内容的复杂性开始增加的时候，因为CSS的属性互不正交，大量的依赖与耦合会导致难以记忆。在知乎上有一个关于CSS为何难以学习的讨论，具体的链接在此，我们可以从中可以得出相当多的关于CSS的如何难以学习的论点，足以阐述CSS存在的当前问题，在我看来CSS的发展和现状其实并不是像JS那样发展的十分的完整，所以我们在写CSS样式的时候会经常发现自己的样式会出现某些局限性。并不是完全的能够兼容所有的情况所有的屏幕尺寸，并且在相同的样式情况下我们可以得出的结论是并不是有且只有一种途径下才能够完成所有的结果。所以CSS的学习是需要相当多的经验积累以及良好的运用经验的。使用CSS的优势网页的读者和作者都可以使用CSS来决定文件的颜色、字体、
webpack构建下换肤功能的实现思路
因为项目是使用webpack构建的，要想生成多份css文件，就要在入口中配置多个入口文件，每个入口文件会提取出一个css文件config.entry={app:['./src/app.js'],defaultTheme:['./src/theme.default.color.js'],orangeTheme:['./src/theme.orange.color.js'],blueTheme:['./src/theme.blue.color.js'],}app.js中import"./app.styl"//整个项目的样式，在各种皮肤下都保持不变的那部分theme.blue.color.js蓝色皮肤js文件import"./theme/blue.styl"blue.styl蓝色皮肤@require"./css/skinTheme/var.blue"//样式变量，整体为蓝色风格的颜色值@require"./css/skinTheme/theme.color"//提取出来的需要换肤的那部分样式如代码所示，
如何在Swiper内制作CSS3动画效果
【CSS】多重边框
image.png需要注意的是，box-shadow是层层叠加的，也就是说第一层投影位于顶层，以此类推。因此，需要做的是按照这个规律来调整扩张的半径。就比如在这个例子中，第一个投影用了10px，第二个投影就要用大于10px的值才能看出效果，除非前一个投影设置了半透明颜色。缺点：用box-shadow设置的多重边框最大的缺点就是不能设置虚线等其他样式的边框。outline如果只是需要2层边框，可以先设置一层常规边框（border），再加上outline（描边）属性来产生外层的边框。outline设置参数的方法和border是一样的。width:300px;height:300px;margin:100pxauto;background:#c33;color:#fff;font-size:30px;text-align:center;line-height:300px;border:10pxsolid#036;outline:10pxsolid#9c0;
你需要知道的CSS-in-JS
你需要知道的CSS-in-JS技术文章来源：前端之巅发布：2017-11-27浏览：30摘要：什么是CSS-in-JS？直接在.css文件里写CSS（CSS-in-CSS）不是挺好的吗，为什么还需要CSS-in-JS？说到这里，不得不提到组件化。因为有了组件化概念，就不再需要维护一大堆杂乱的样式。CSS-in-JS在组件层面（而不是文档层面）对CSS进行了抽象。在项目中维护一个巨大的样式文件夹实在是一件让人感到头疼的事情，很多人不禁感叹，是否还有其他更好的办法？不用说，CSS-in-JS在目前看来就是一个最佳解决方案。什么是CSS-in-JS？直接在.css文件里写CSS（CSS-in-CSS）不是挺好的吗，为什么还需要CSS-in-JS？说到这里，不得不提到组件化。因为有了组件化概念，就不再需要维护一大堆杂乱的样式。CSS-in-JS在组件层面（而不是文档层面）对CSS进行了抽象。在项目中维护一个巨大的样式文件夹实在是一件让人感到头疼的事情，很多人不禁感叹，是否还有其他更好的办法？不用说，CSS-in-JS
10个有趣的Javascript和CSS库-2017年11月
TailwindCSSTailwind是用于构建自定义用户界面的实用CSS框架。每个Tailwind小应用都有多种尺寸，这使得创建响应式界面变得非常简单。您可以自定义颜色，边框尺寸，字体，阴影等等，没有任何限制。PrettyCheckbox这是一个纯CSS库，用于创建漂亮的复选框和单选按钮。它提供了不同的形状（正方形，曲线，圆形），选择方式（默认，填充，thick），颜色（主要，成功，信息），颜色类型（实心，轮廓）和动画。它支持自定义字体图标，SVG图标和SCSS自定义。Bulma这是一个基于Flexbox的免费开源CSS框架。Bulma有39个.sass文件，可以单独导入。您可以轻松地自定义它，并使用您喜欢的颜色和变量创建自己的主题。Bulma中的每个元素都是移动端优先的，并针对小屏幕进行了优化。ReactStatic由Nozzle.io创建的React静态网站框架。它具有令人难以置信的快速运行时间和性能，并提供惊人的用户体验。它完全使用React构建，支持所有React生态系统，包括CSS-in
CSS优化：使用 DevTools 优化动画性能
CSS动画被认为是超高性能的。这种情况对于少数元素的简单动画来说是事实，如果您没有在考虑性能的情况下，对动画进行编码，会增加很多复杂性，网站用户很快就会注意到，可能会感到恼火。在这篇文章中，我将介绍一些有用的浏览器开发者工具的功能，这些功能将能够帮助你在使用CSS执行动画时检查到底发生了什么。这样，当一个动画效果看起来不太连贯时，你将会更好地了解为什么以及如何解决它。CSS性能相关的开发者工具你的动画至少需要达到60fps（每秒帧数）才能在浏览器中流畅运行。速率越低，动画效果越差。这意味着浏览器在一帧内完成工作的时间不超过16毫秒。但是在短的时间内到底发生了什么呢？你怎么知道你的浏览器是否跟上了预期的帧率？在评估动画的质量时，我认为没有什么能比用户体验更好。但是，现代浏览器中的开发者工具，虽然并不总是100％可靠，但已变得越来越智能，而且你可以使用它们来查看，编辑和调试您的代码。当您需要检查帧率和CSS动画性能时，也是如此。来看看它是如何工作的。Firefox的性能调试工具初探在本文中，我使用Firefo
CSS定位属性详解
最近学习CSS相关知识，定位是其中的一个难点。不了解其中细节，有时候在使用的时候会弄得一团糟。本篇文章整理下关于定位属性的具体理解与应用。一、简介1.文档流在介绍postion之前，有必要先了解下文档流。简单说就是元素按照其在HTML中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline），不独占一行。一般使用margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“距离”。只要不是float和绝对定位方式布局的，都在文档流里面。表现如下：
JS中动态添加元素并绑定事件，造成程序重复执行
歇了两周没写点什么了，感觉最近有点知识慌，分享一下前段时间遇到的bug,这个Bug是关于jquery的on方法绑交互事件，类似于$('#point').on('click','.read-more',function(){})这样的代码造成的程序重复执行，很多人在文章里写到了，也说了用off方法来解绑，但都未能点出问题的本质，几乎都忽略了问题的本质其实是事件委托造成的。话不多说，上点天天看到的代码：第一种：$(document).on('click',function(e){consol.log('jquery事件绑定')});第二种：document.addEventListener('click',function(e){consol.log('原生事件绑定')})；第三种：varid=setInterval(function(){console.log('定时器循环事件绑定')},1000)；上面的代码，相信不少同盟，天天都会写到，看似简单的事件绑定，却经常能给我们带来意想不到的结果，特别是在这个S
七个帮助你处理Web页面层布局的jQuery插件
1.UI.LayoutjQueryUI布局插件官方网站：http://layout.jquery-dev.com/index.cfm使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局可以创建任何你想要的UI外观;从简单的标题或侧边栏到具有工具栏，菜单，帮助面板，状态栏，子表单等的复杂应用程序。集成并增强其他UI小部件，如选项卡，手风琴和对话框，以创建丰富的界面。图片发自简书App2.jQUeryMasonry官方网站：https://masonry.desandro.com/?resources/jquery-masonry所有项目的大小和样式都由您自己的CSS处理。项目大小可以用响应式布局的百分比来设置图片发自简书App3.jLayoutjLayoutJavaScript库提供了用于布局组件的布局算法。一个组件是一个抽象;它可以通过多种方式实现，例如HTML5Canvas绘图中的项目或HTML元素。jLayout库允许您专注于绘制各个组件，而不是如何将其排列在屏幕上。Git
基于HTML5 Canvas 点击添加 2D 3D 机柜模型
今天又返回好好地消化了一下我们的数据容器DataModel，这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。为了让这个例子具现化，我将这个简单的例子做了一点改动，下面我会一一解释。例子地址：http://hightopo.com/guide/guide/core/datamodel/examples/example_datamodel.html这是我改造之后的模样，将dataModel数据容器共享，通过对数据容器的增删事件的监听得到的现在的结果，并且在显示上做了一点“手脚”。下面我们从头解析这例子，你们会知道为什么我特地将这个简单的例子提出来。首先，我们得创建场景将作为基础，整个场景我算是分为三个部分，顶部工具栏，2D部分以及3D部分。顶部工具栏部分使用的纯HTML写的：
cookie、localStorage和sessionStorage 存储、获取、删除等使用方式以及三者之间的区别等内容
前端开发的时候，在网页刷新的时候，所有数据都会被清空，这时候就要用到本地存储的技术，前端本地存储的方式有三种，分别是cookie，localstorage和sessionStorage，这是大家都知道的。本文的主要内容就是针对这三者的存放、获取，区别、应用场景。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。本文首发于我的个人blog：obkoro1.com使用方式：很多文档都是说了一大堆，后面用法都没有说，先要学会怎么用，不然后面的都是扯淡，所以这里我先把使用方式弄出来。cookie:保存cookie值：vardataCookie='110';document.cookie='token'+"="+dataCookie;获取指定名称的cookie值functiongetCookie(name){//获取指定名称的cookie值//(^|)name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；var
基于vue+canvas的excel-like组件
InstallNPM/YarnInstallthepackage:npminstallvue-canvas-grid--saveThenimportitinyourprojectimportVuefrom'vue'importGridfrom'vue-canvas-grid'Vue.component('grid',Grid)UsageSimplyuseitlikeso:
C#设计模式之十六迭代器模式（Iterator Pattern）【行为型】
C#设计模式之十六迭代器模式（IteratorPattern）【行为型】一、引言今天我们开始讲“行为型”设计模式的第三个模式，该模式是【迭代器模式】，英文名称是：IteratorPattern。还是老套路，先从名字上来看看。“迭代器模式”我第一次看到这个名称，我的理解是，迭代是遍历的意思，迭代器可以理解为是遍历某某的工具，遍历什么呢？在软件设计中，当然遍历的是集合对象，所以说迭代器模式是遍历集合的一种通用的算法。如果集合只有一种类型，那这个模式就没用了，就是因为集合对象包含数组、列表，字典和哈希表等各种对象，如果为每一种集合对象都实现一套遍历算法，也不太现实，因此为了解决遍历集合有一个统一的接口这个事情，所以就提出了“迭代器”这个模式。二、迭代器模式的详细介绍2.1、动机（Motivate）在软件构建过程中，集合对象内部结构常常变化各异。但对于这些集合对象，我们希望在不暴露其内部结构的同时，可以让外部客户代码透明地访问其中包含的元素；同时这种“透明遍历”也为“同一种算法在多种集合对象上进行操作”提供了可能。使用面向对象技术将这种
实战Excel Add-in的三种玩法
实战ExcelAdd-in的三种玩法作者：陈希章发表于2017年11月26日前言这个系列文章应该有一阵子没有更新了，原因是一如既往的多，但是根本所在是我对于某些章节其实还没有完全想好怎么写，尤其是对于OfficeAdd-in这块——到底是要每个都去单独写一遍，还是有其他什么好的写法会对读者更有帮助？正如我在这篇文章分享的一些关于写作的个人经验那样，我为此颇费了一些心思琢磨，直到最近才做出了一个选择：我将不拘泥于每个应用都写一次，而是尝试总结一些共性的操作指南。本文将是一个尝试，以我对于OfficeAdd-in开发的了解，Excel所占的比重相对较高（根据不完全统计，在应用商店所有OfficeAdd-in中，Excel占到40%左右），所以我希望用本文的ExcelAdd-in的实际案例，给广大的OfficeAdd-in开发人员直观地了解三种不同的开发技术是如何过渡和共存的，以帮助大家做出自己的选择。本文所提到的三种玩法，是指最早的VBA技术，后来的VSTO技术，以及现在更推荐的WebAdd-in的技术。如果大家对于这些基
超详细，手把手教你入门.NET for Linux
基本上，当你知道了一个程序员的首选操作系统是什么的同时，你就可以猜测出他们使用的是什么编程语言。例如，如果程序员使用的是Windows，那么他们可能使用的语言列表包括C#，JavaScript和TypeScript，如果是比较传统的程序员，那可能使用VisualBasic，如果是紧跟时代潮流的程序员，那他可能就是在用F#;如果他们使用的是Linux，你也会得到一个开源项目列表：Go，Python，Ruby，Rails，Grails，Node.js，Haskell，Elixir等等，当然我们也不能忽略最近崭露头角的新语言——Kotlin。但是，微软的一个举动就打破了这个局面，其制作NET框架，创建.NETCore，开放源代码可以任何平台上运行，例如Windows，Linux，MacOS，甚至还可以在手机操作系统—三星Tizen上运行。鉴于这种情况，Linux程序员应该尽快熟悉.NETCore，并尝试使用它来构建生产应用程序。如何在Linux上安装.NETCore可以运行.NETCore的Linux发行版包括RedHatEnte
为什么要选择Apache Pulsar（一）
ApachePulsar是由Yahoo开发并开源的下一代发布订阅消息系统。Pulsar用于解决现有开源消息系统的不足，并已在Yahoo的生产环境中运行了三年多时间，助力Yahoo的主要应用，如YahooMail、YahooFinance、YahooSports、Flickr、Gemini广告平台和Yahoo的分布式键值存储系统Sherpa。Pulsar于2016年底开源，目前是Apache软件基金会的孵化器项目。在这篇文章里，我们将介绍Pulsar的一些主要特性。在上一篇文章中，我们介绍了Pulsar的一些组件概念和术语。Pulsar集群主要由三部分组成：broker集群，bookie集群，以及用于协调配置管理的ZooKeeper集群。Pulsarbroker组件用于接收、保存和传递消息。bookie是ApacheBookKeeper服务器，为Pulsar提供持久性的存储，一直到消息被消费掉。架构图如下所示。图1Pulsar集群架构图灵活的消息模型传统的消息模型有两种：队列模型
爬了知乎200万数据，图说程序员都喜欢去哪儿工作~
因为最近和朋友吃饭，大家都到了大三季，都在纠结自己该以哪里作为自己职业发展的起点？也想看看自己的背景，能不能找到靠谱的师哥师姐帮忙，那么师哥师姐都在哪里发光发亮呢？我当时也是午休的时候想到，知乎有那么多结构化的好的数据，不如抓取之，拿来分析可以看看名校生们都在哪？我们行业的人都喜欢哪，哪里每年带走一堆人？然后花半小时写了个多线程爬虫，爬下来几百万数据（其中每个学校的大圆圈占比代表该校学生在调研总数中的占比）这次抓取的数据量有将近200万，跑了一个下午，然后我把没有公司或者教育学校的筛掉，就还剩25万了~
开发者的4个层级和6大差异
先看一张图——“开发者山行图”：：这张图被我称为“开发者山行图”，它描绘了开发者的4个层级和不同层级大概的收入范围（图上标注的收入，以一线城市互联网行业为基准，非一线地区，请除以系数）。4个层级如下：第1层：普通程序员第2层：熟练开发者、高级开发工程师、技术组长第3层：技术专家、架构师、一线经理第4层：科学家、研究员、首席（资深）架构师、部门研发总监今天的文章，我们先解释下层级划分，然后介绍是哪些差异造成了开发者的分层差距，最后说明一下我们的课程可以解决什么问题。开发者的4个层级按我的理解，开发者的4个层级，可依次对应普通、熟练、优秀、卓越四个词。【1】普通普通开发者，能够使用一定的专项技术，完成别人分配的模块的开发。在工作当中，他们很少有机会决定自己做什么和怎么做，通常是在他人指导和安排下编码实现特定的细分功能。当你还是一个普通开发者时，实际上处在体力化的代码打写阶段，很容易被替代。如果你不能精进技术水平，三两年后就失去竞争力了——因为你的技能水平对不起你的工作年限，你把一年工作经验重复用了N