花裡胡哨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，蒙版之上的事件也會觸發。