效果：

See the Pen by NINE () on .

CSS PAINT API

CSS Paint API，是API集合Houdini中的一部分，可以用来绘制图像，并作为需要设置image的css属性的值，比如background-image，border-image。

其他API如Layout API来实现布局，Parser API解析CSS表达式等。不过整体来......

原文地址：

随便看到的顺便记一下，虽然比较短小

这是一段css变量（通常称为自定义属性）

:root {

--mouse-x: 0px;

--mouse-y: 0px;

}

你可能用它来设置定位

.mover {

left: var(--mouse-x);

top: var(--mouse-y);

}

要使用JavaScript来修改变量值，可以这样：

l......

原文地址：

CSS Shape Level 1规范在Chrome和Safari浏览器上获得支持已经有许多年了，本周（2018/9/4那周）Firefox发布的生产版本Firefox 62中添加了对它的支持，并让我们能在Firefox开发者工具中更好的使用它。 在本文中，我将介绍一些CSS Shapes的使用示例。或许，是时候给你的设计中添加一些弯曲形状了？

CSS Shapes是什......

原文地址：

图表分为四个部分

整体图形网格

"days"列

“month”行

图形方格

整体网格

贡献图可以分为三部分 - 星期列，月份行，和独立的方格

在主要的 .grid元素中，有三个元素

<div class="graph">

<ul class="months">......

几个概念

设备像素，也称为物理像素，是设备能控制显示的最小单位；

CSS像素，写页面样式时候的像素单位，不是实际存在而是抽象的；

设备独立像素，计算机坐标系中的一个点，是可由程序控制使用的虚拟像素。（也有称设备逻辑像素）

screen对象的width和height属性可以返回显示屏的宽高，这个值其实是设备独立像素而不是屏幕分辨率，设备的屏幕分辨率是无法直接用代码获取的。在pc端看到的......

之前做一个项目，用的pure css里的grids来做的栅格和响应式布局，css里处理断点的是使用的em单位，因为刚好和设计师那边给的断点位置不一样就直接改了并顺手写的px单位。最近又有类似的项目突然想到这个单位的问题，就稍微测试一下下，看看不一样的单位有什么区别。

IE看的ie9，因为虚拟机里只有这个..看之后能不能补一下

默认情况

三个div，在断点处更改背景色。

@media s......

See the Pen by NINE () on .

图标是在阿里的iconfont里面随便翻的，下载的svg格式，描边动画需要有stroke

SVG的stroke属性

stroke 颜色

stroke-width 宽度

stroke-linecap 端点的表现

stroke-dasharray 虚线

描边动画重点在最后这个属性，SVG本身也可以用......

原文：

在本文中，我并不会谈论一些大型的前端框架，比如像React、Angular、Vue等,也不准备讲流行的代码编辑器如Atom，VS Code，Sublime等，我只是想分享一个我认为对提升开发者工作效率有帮助的工具列表。

一些朋友可能对其中的一些工具有所了解，但是如果你从中发现新的和有用的东西，我会感到很高兴。

这个列表包含很多不同的资源，所以为了方便......