12个CSS技巧：禁用鼠标事件、禁止用户选择、平滑滚动、开启硬件加速、消除transtration闪屏等。

1.css禁用鼠标事件

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

2.实现条纹网格的方式

nth-child(even/odd)

//odd表示奇数，此时选中奇数行的样式，even表示偶数行
.row:nth-child(odd){
    background: #eee;
}

nth-of-type(odd)

.row:nth-of-type(odd){
    background: #eee;
}

渐变实现linear-gradient

.stripe-bg{
  padding: .5em;
  line-height: 1.5em;
  background: beige;
  background-size: auto 3em;
  background-origin: content-box;
  background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

3.css禁止用户选择

body{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

4. 如何修改chrome记住密码后自动填充表单的黄色背景 ？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
  }

5. 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing: antialiased;

6. 让overflow:scroll平滑滚动？

-webkit-overflow-scrolling: touch;

7. 开启硬件加速

//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。
.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

8. 移动端html标签几个体验优化

html,body{
    overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/
    -webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/
    position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/
}

9.手机上的多行省略

.overflow-hidden{
    display: box !important;
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;/*第几行出现省略号*/
    /*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}

10. 长时间按住页面闪退

.element {
    -webkit-touch-callout: none;
}

11. 改变输入框内提示文字颜色