1 . 設(shè)置input里placeholder的字體顏色 屬性

input::input-placeholder{color:#1b9dc7;}

input::-webkit-input-placeholder{color:#1b9dc7;}

input::-o-input-placeholder{color:#1b9dc7;}     

input::-ms-input-placeholder{color:#1b9dc7;}

input::-moz-input-placeholder{color:#1b9dc7;} 

2. 圖片無法正常加載時 用默認圖片替代的功能

<img src="img/1.jpg"  onerror="javascript:this.src='img/default.png';" >  

3. 穿透上層元素給下層元素添加事件

.pointer{
　　　　　　pointer-events:none;
　　    }

4. 設(shè)置元素透明背景：

input{
    background:transparent
}

5. 設(shè)置瀏覽器自動計算元素寬度屬性(calc)

.div{
    width: calc(100% - 200px);   
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
}

6. 單行文本超出寬度顯示省略號CSS代碼

div{
    overflow: hidden;   
    width: 120px;  
    text-overflow: ellipsis;    
    white-space: nowrap;  
}

7. 設(shè)置你的彩色照片顯示黑白照片

img{
         filter: grayscale(100%);
        webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
}

8. 自定義滾動條css樣式

  1、::-webkit-scrollbar   滾動條整體樣式商乎；
  2柿扣、::-webkit-scrollbar-thumb  滑塊部分芳肌；
  3彤避、::-webkit-scrollbar-thumb  軌道部分;

    /*滾動條整體樣式*/
    .box::-webkit-scrollbar {
        width: 10px;
        height: 1px;
    }

    /*滾動條滑塊*/
    .box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }

    /*滾動條軌道*/
    .box::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
        border-radius: 10px;
        background: #ccc;
    }

9. 使用CSS生成一個三角形

<div class="triangle"></div>

.triangle { 
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

10. 禁止用戶選中文本(user-select)

div {
     user-select: none; 
     -webkit-user-select: none;
    -moz-user-select: none;
}

11. 禁止右鍵菜單相關(guān)操作

document.oncontextmenu = function() { //禁用右鍵菜單
   event.returnValue = false;
}

document.onselectstart = function() { //禁用網(wǎng)頁上選取的內(nèi)容
    event.returnValue = false;
}
document.oncopy = function() { //禁止拷貝文件
   event.returnValue = false;
}

document.onkeydown = function() { //禁用鍵盤中的ctrl稽坤、alt哪自、shift
    if(event.ctrlKey) {
       return false;
    }
  if(event.altKey) {
     return false;
  }

   if(event.shiftKey) {
      return false;
   }
}

12. 移除select默認樣式

 select{
       outline: none;
       border: 0;   //去除邊框
       appearance: none;  //去除下拉箭頭
      -moz-appearance: none;
      -webkit-appearance: none;
 }

13. 禁止button選中和點擊

 button{
        pointer-events: none;
        cursor: not-allowed;
        box-shadow: none;
        opacity: .65;
        background: #e4e4e4;
        color:#0b0b0b;
        cursor: not-allowed;
}