每一层渐变都可被当做一张背景图，也就是说每一层渐变都可以指定其position、size、repeat。玩过PS的的同学应该知道图层的概念，咱们的背景图层叠原理也类似（当然，渐变也可以当背景图），控制渐变的大小，哪里需要镂空，以及需要显示的位置、是否平铺，就可以实现大多数场景下…

将背景绘制范围设为padding-box，边框设置为透明色，即可实现效果。 上图多边框可使用 box-shadow 实现，有一个缺点就是只能设置实线。 box-shadow支持逗号分隔语法，我们 可以创建任意数量的投影。 如上图，如果只是需要两层边框，当然我们还可以使用outl…

最近我开始思考React应用的状态管理。我已经取得一些有趣的结论，并且在这篇文章里我会向你展示我们所谓的状态管理并不是真的在管理状态。 我们来看一个简单的例子。想象这是一个展示用户名称、密码和一个按钮的表单组件。用户会在填写表单后点击提交。如果一切顺利，我们完成了登录，并且有必…

也许有人会说，都快 2019 年了怎么还读 CSS2.1 规范。一方面，现在最新的 CSS （core） 规范是 CSS2.2（以下截图来自 https://www.w3.org/TR/CSS/ ），又因为 CSS2.1 有中文的版本，并且和 CSS2.2 规范差异性不是很大，…

概述： 在前端项目中，有时会需要通知、提示一些信息给用户，尤其是在后台系统中，操作的正确与否，都需要给与用户一些信息。 1. 实例 在页面的右侧会出现一个Toast弹框，多次点击时，会依照顺序进行显示，并且Toast可自动关闭，具体效果如图。 2. 原理 在组件外构建一层代理并…

通常，Vue给我们的印象是“小巧易用”，凭借其简洁明了的模板开发方式，以及强大的指令系统，我们可以轻轻松松几行代码搞定一个数据双向绑定的页面。但是，这背后Vue帮我们做了多少工作，我们是知之甚少的。 Vue就像一个黑盒子，我们输入一些数据，它给我们输出一个渲染好的页面。对于开发…

编者按：文中作者为大家提供了19种方法，大多数方法后面都提供了例子，如果你对这些例子感兴趣，请直接查看英文原文，并访问例子中的链接。 我已经汇集了 19 项 2019 年可能有价值的技能和主题。请别为难我 - 我和大多数开发人员一样，不可能熟悉每一个主题。 这些只是我所关注的令…

HTML5不仅仅定义了拖拽的事件类型，还在事件对象中规范了一个重量级的对象：dataTransfer,借助它，我们可以实现数据传输、拖拽图案设定、拖拽文件上传，可通过event.dataTransfer来访问该对象. 需要借助event.dataTransfer对象的一些方法实…

随着用户界面中可能出现的不同状态和状态间转换的数目的不断增长，样式和动画的管理很快就变得复杂起来。即使是一个简单的登录表单也可以有很多不同的“用户状态流”，并且有许多边界情况需要考虑。 状态机作为一种很好的编程范式，通过符合直觉和声明式的方式来管理用户界面状态间的过渡。我们已经…