不积跬步，无以至千里；不积小流，无以成江海。
—— 荀子《劝学篇》
currentColor
currentColor 是 CSS 很早就给我们提供的一个变量，它等于当前元素的 color 属性值。
比如说下面这个
.foo {
color: red;
box-shadow: 0 0 2px currentColor;
}
.foo 中默认的文本颜色设置成了红色，在设置 box-shadow 的时候，指定为 currentColor ，就是说当前元素的阴影色也是红色的。
当然了，如果当前元素没有指定 color 属性，currentColor 就是指从祖先元素那里继承的 color 值。
兼容：IE9+ 和所有其他现代浏览器。
:placeholder-shown
:placeholder-shown 伪类是用在 <input> 和 <textarea> 上的。
名副其实，当元素设置了 placeholder 属性，并且我们没有在 <input>/<textarea> 中输入内容的时候，就是这个伪类起作用的时候。
input {
border: 2px solid black;
padding: 3px;
}
input:placeholder-shown {
border-color: silver;
}
再稍微解释一下：有一个输入框设置了占位文本，占位文本显示的时候， 输入框边框颜色是银色，当你在输入框里输入内容后，占位文本不显示了，:placeholder-shown 就不起作用了，输入框边框就变成原来的默认黑色了。同理，我把输入框文本删除干净后，占位文本重新显示，那么 :placeholder-shown 就起作用了，输入框边框又恢复成银色。
兼容：Chrome 47+、Firefox 51+、Safair 9+。
:focus-within
:focus-within 这个伪类用在某个元素上时，什么时候起作用的呢？答案就是在元素自己或内部有元素 :focus 的时候。
比如说下面这种情况：
上面一个表单里包含两个输入框，当任意一个输入框聚焦了，表单背景就变黄了，而且 label 文字也从灰色变黑了。
代码很简单：
form:focus-within {
background: #ff8;
color: black;
}
是不是很方便呢，有时候子元素 focus 的时候，想控制下祖先元素的样式，就可以用这个属性啦。
兼容：Chrome 60+、Firefox 52+、Safair 10.1+。
overscroll-behavior
overscroll-behavior 是用来禁止“连锁滚动”的，很有用的。
遇到过下面这种情况吗？
滚动页面右下角这个小对话框里的内容，滚到底部，当我们继续往下滚动鼠标滚轮的时候，发现后面的主体页面也跟着滚动起来。
这是浏览器默认行为，可有时候我们不想要这样的效果，希望对话框内容滚动完毕后，后面的主体页面不要滚动。
这还是很好做的，我们只要为对话框指定下 overscroll-behavior 属性就可以了，属性置为 contain。
.messages {
overscroll-behavior: contain;
}
狠戳后面的链接查看效果：mdn.github.io/css-example…
overscroll-behavior 是一个复合属性，当我们设置 overscroll-behavior: contain; 的时候，相当于设置了 X 和 Y 轴两个方向上的行为，也就是说：
.messages {
overscroll-behavior: contain;
}
/* 等同于 */
.messages {
overscroll-behavior-x: contain;
overscroll-behavior-y: contain;
}
向上面例子里的情况，如果我们只是想控制纵轴，也就是 Y 轴方向上的连锁滚动效果，只要使用
.messages {
overscroll-behavior-y: contain;
}
就够了~
兼容：Chrome 63+、Firefox 59+。
（完）
