是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。 是一个相对长度单位，最初是指字母…

作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟“水银泄地”般的页面设计和“炫酷逼真”的动画效果，是我们区别于其他程序员所特有的优势之一。 尽量百分之百的还原视觉稿，为UE设计灵感和用户视觉享受架起一座桥梁：正所谓“晋帝时祭北郊，更祝版，工人削之，笔入木三分。”借古书…

不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子： 现在，你甚至可以在边框中使用渐变。 具体的例子可以看这里，或者看这里使用的是background-clip和backgroun…

grid 布局是W3C提出的一个二维布局系统，通过 display: grid 来设置使用，对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 grid 布局进行一个简单的了解。目前，grid 仅仅只有 Edge使用前缀能够支持，为了更好地体验，可以使用 C…

在不久前，所有 HTML 页面的布局都是通过table、float和其他 CSS 属性来完成的，但其实这些属性并不适合设计复杂的网页。 紧接着，出现了flexbox ——一种专门为创建强大的响应式页面而设计的布局模式。 使得元素和内容的正确对齐变得很容易，现在是大多数网页开发者…

css有些属性容易忘记，半天不写就要去查api，有时候api还不好使，于是还是记下来以后方便用，后续会慢慢补充进来的。 可以通过input, blur事件来监听element的输入和输入完后鼠标离开。 手机video 都可以在页面中播放，而不是全屏播放了。 使用clearfix…

效果如其名，想必都见过下雪（可能南方人除外哈哈），但下雪效果只是一类效果的名称，可以是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果。 由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还有gif），对比下css3和canv…

1. 思路 2. 设计 我们再定义一个与容器颜色相同的盒子, 将上半部分盖住就可以啦. 3. 最终解决方案代码