花里胡哨css玩法

1.css禁用鼠标事件

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

2.实现条纹网格的方式

.row:nth-child(odd){
    background: #eee;
}
.row:nth-child(even){
    background: #fff;
}

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.改变输入框内提示文字颜色

::-webkit-input-placeholder { /* WebKit browsers */
    color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

8.消除transtration闪屏

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

9.蒙版点击问题

div设置 pointer-events:none，蒙版以下的图层仍可以拖动和点击。

设置为 pointer-events:auto，蒙版之上的事件也会触发。