从去年年底开始，浏览器已经开始支持的原生平滑滚动定位，CSS scroll-behavior属性和JS scrollIntoView()方法都可以。本文就将捋一捋这些平滑滚动新特性的使用方法，实际效果，以及如何在实际中应用等。一如既往，丰富配图，含GIF演示和视频截屏，必要的源代码展示和详尽的demo，希望本文内容能够对您的学习有所帮助。
CSS :visited伪类选择器隐秘往事回忆录
2018年10月12日 by 阅读 22411 次, 今日 20 次
搞懂SVG/Canvas中nonzero和evenodd填充规则
2018年10月3日 by 阅读 38942 次, 今日 26 次
只要是路径填充，都有两种规则，nonzero和evenodd，无论是SVG中的路径填充，还是Canvas中的路径填充，如果还有其他和路径相关的技术（甚至设计软件），也离不开这两种填充规则。换句胡说，这是超越各种语言，普世通用的技能点。下面，看看我能不能用足够精简的语言，尽可能让大家都搞懂这两种路径填充规则。
拖拽献祭中的黑山羊-DataTransfer对象
2018年09月30日 by 阅读 46892 次, 今日 21 次
伟大的安兹·乌尔·恭释放了一个超位魔法——拖拽献祭中的黑山羊魔法！凡是不能手写页面元素拖拽效果者，即死，需10日才能复活！顿时，无数前端手足无措，惊恐万分，仓皇而逃，但终究难逃一死。此时，一位小白前端横空出世，靠着解构此魔法的关键DataTransfer对象，破解了这个超位魔法，挽救了无数的前端开发，而其破解的详细信息已经记录在这篇文章中……
直接剪切板粘贴上传图片的前端JS实现
2018年09月21日 by 阅读 67085 次, 今日 24 次
可能有小伙伴并不知道，在网页中，我们直接Ctrl+V也是能够上传图片的。诶？真有这么厉害？没错，就是这么厉害！要不进去瞅瞅，现成的源代码，高保真的demo，包你分分钟学会这种姿势，哦，不，知识！
利用剪切板JS API优化输入框的粘贴体验
2018年09月9日 by 阅读 42177 次, 今日 19 次
输入框输入内容我们有时候为了方便，会直接粘贴内容，例如IP，网址，或者陌生人的手机号。但是，有时候我们复制的内容包含冗余信息，或者格式不准确，还需要重新编辑，体验就不好了。实际上，我们可以直接控制剪切板里面的复制的文字内容，可以实现粘贴的数据是我们希望的准确的数据格式，省去用户重新自己编辑的麻烦，可以有效提升用户的交互体验。
具体该如何实现呢？请看本文的介绍以及可以直接复制粘贴就可以使用的JS代码。
借助wbr标签实现连续英文字符的精准换行
2018年09月1日 by 阅读 33516 次, 今日 25 次
在web网页中，连续英文单词默认是不换行的，使用word-break虽然能够有效，但是，会有一个很明显的问题，这换行的位置把英文单词直接破开了，可读性下降。有没有什么方法，技能换行，又不破坏单词呢？可以试试HTML中的wbr标签。
妙法攻略：渐变虚框及边框滚动动画的纯CSS实现
2018年08月30日 by 阅读 61891 次, 今日 21 次
本文内容如题，介绍几个实现渐变虚线框的方法，介绍虚线滚动动画，实线滚动边框动画的实现，所有这些方法都是纯CSS实现，就算这些动画效果你实际项目用不到，但是其大开眼界的实现原理相信也会给你有所启示的。
一如既往，有demo实例，有源代码展示，和必要的截图，希望本文的内容能够对您的学习有所帮助。
学习了，CSS中内联SVG图片有比Base64更好的形式
2018年08月19日 by 阅读 97581 次, 今日 37 次
难免的，我们需要在CSS中内联SVG图形，以前我都是把SVG文件转换成Base64格式然后内嵌，最近发现，这并不是最好的方法，最好的方法是使用部分转义的SVG原始代码，兼容IE9+，而且颜色什么的可以直接在CSS中修改。这种方法具体真容是什么？有兴趣可以进去看下。其中有个炸裂的SVG在线压缩合并工具，相信你会喜欢的。
我的应用
我的应用