能用css解决的就不要用JavaScript。16个常用css技巧收集整理（一）中收集了animation-fill-mode、calc()计算值、box-sizing、currentColor，本文继续其它收集的css技巧。
caret-color
caret-color属性用来定义插入光标（caret）的颜色，就是那个在网页的可编辑器区域内，用来指示用户的输入插入光标。可编辑器区域包括input、textarea、设置contenteditable的普通HTML标签。
input{
caret-color:#f00;
}浏览器兼容：Firefox58+、Chorme63+、Safari11.1+等。
scroll-behavior
CSS属性scroll-behavior为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在html根元素中指定这个属性时，将适用于整个视窗口。在某个元素上指定这个属性时不会传播到视口之外。有的用户代理可能会忽略这个属性。
该scroll-behavior属性接受两个值，基本上可以关闭和打开平滑滚动功能。
auto （默认值）：此值允许滚动框内元素之间的突然跳转。
smooth：正如其名称平滑滚动，滚动框通过一个用户代理定义的时间段使用定义的时间函数来实现平稳的滚动，用户代理平台应遵循约定，如果有的话。
更多关于scroll-behavior使用场景实例移步到这里。
浏览器兼容：Firefox36+、Chorme61+、Opera48+等。
::selection
应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
只有一小部分CSS属性可以用于::selection选择器： color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。要特别注意的是，background-image 会如同其他属性一样被忽略。
注意：::selection是css3引入的，所以只能用双冒号
<div>提供::selection 伪元素选择器测试的文本</div>
<p>也尝试选中在这个p标签中的文本</p>/* 将被选中的任何文本渲染为金黄色和红色背景 */
::-moz-selection {
color: gold;
background: red;
}
::selection {
color: gold;
background: red;
}
/* 将选中文本渲染成黑色背景白色前景 */
p::-moz-selection {
color: white;
background: black;
}
p::selection {
color: white;
background: black;
}
-webkit-overflow-scrolling: touch
IOS下css设置元素平滑滚动，为内容溢出的滚动元素添加如下样式:
overflow-y:auto;
-webkit-overflow-scrolling: touch;详细DEMO看这里。
