很多炫酷的设计都用了这个 各种after before ##Pseudo-class用非class来定位某个元素或者状态 ul li:nth-child(4){}a:hover{} ##Pseudo-element某元素的一部分 p:first-line
...

首先要有 flex container 然后里面的内容都是 flex itemflex item 提供了强大的功能，例如对其，控件的自动伸缩 先来个 flex container： display: flex; specifies a block-level flex container. di ...

多列布局 <article class=”container”><p>Lorem ipsum...</p><p>Donec tincidunt...</p><p>Etiam eu elit...</p><!-- ...

Animation和 transition不同， animation可以定义每一帧，transition就是start和end两帧 百分比来定义帧 @keyframes my-first-animation {0% {/* Styles */}25% {/* ...

Only three of the four transform types can operate in a 3D environment: rotate, translate, andscale. This, of course, means that the skew() function i ...

Transitions 和后面说的 Animation是不同Transitions 主要是 一个元素从一个状态到另一个状态变化，过程是过渡的 例子： a {transition: .5s;}a:hover {opacity: .5;} ##Controllin ...

transform 在2D里主要是4个方法 除了rotate 其他都是接受x y值 translate skew rotate scale matrix方法是深度学习 ##Translate 是x，y左边的变化 位置变动 transform: translate(100px, 50px); 相 ...

##CSS3 Filters可以理解为上面蒙层滤镜目前只有webkit支持，所以要前缀 针对背景色或者背景图都行 grayscale //灰度 brightness //亮度 contrast //对比度 saturate //饱和度 默认是100% 0的时候就是grayscale( ...

##background-clipbackground-clip 对背景区域产生变化 div { background: rgba(0, 0, 0, 0.95); color: #ccc; border: 20px solid rgba(0, 0, 0, 0.7); ...

很多目前都不支持的，就不写了。至少 chrome 得支持吧，要不没法试验 对于以写特定在字符组合会出现一些字符见空隙的问题，过大或过小 比如 WA ff 之类的。 text-rendering 来帮忙了 h1:first-child { text-rendering: optimiz ...