单行/多行文本溢出省略号

/* 单行 */
.oneLine {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* 👇 仅适用于WebKit浏览器或移动端的页面 */

.twoLine {
  /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box; 
  /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical; 
  /* 行数*/
  -webkit-line-clamp: 2; 
  overflow: hidden;
}

毛玻璃模糊遮罩效果

/* 
filter: CSS属性将模糊或颜色偏移等图形效果应用于元素。
blur(radius):函数将高斯模糊应用于输入图像。
  radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合.
  因此，较大的值将产生更多的模糊。若没有设置值，默认为0。
  该参数可以指定为 CSS 长度，但不接受百分比值。
*/
.Mask {
  filter: blue(2px);
}

position:sticky 实现粘性布局的坑

设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值（top, left,...）决定的。

/* 下面元素当滚动到viewPort顶部以后吸顶*/
.Box {
  top:0;
  position: sticky;
}

问题：粘性布局突然时效。
原因：其他组件CSS 给页面顶层元素增加 overflow:hidden; 导致。设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。
参考文档

position:sticky 的生效的其他限制：

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。

隐藏滚动元素的滚动条

背景：显示原生滚动条太丑，自定义滚动条交互样式。
方法：滚动元素包装一个父元素，设置其高度为滚动元素高度 - 滚动条高度（以X轴为例）。

/* 滚动元素 */
.scrollDiv {
  height: 5rem;
  overflow-x: auto;
}
/* 滚动元素父元素*/
.scrollDivContainer {
  overflow: hidden;
  height: 4.6rem;
}

方法2: 增加一个同级 Div 或使用父元素的伪类元素；通过绝对定位 + 同色背景遮住滚动条。

css 新特性 contain

CSS contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。

使用参考： CSS新特性contain，控制页面的重绘与重排

参考文档

Moz-filter滤镜