技術標籤：css改變滾動條樣式相容火狐

大家收藏前記得點贊哦～

一、設定input 的placeholder的樣式

input::-webkit-input-placeholder {
  /* placeholder顏色  */
  color: #c41f09;
  /* placeholder字型大小  */
  font-size: .8rem;
  /* placeholder位置  */
  /*text-align: center;*/
}

二、改變選中內容的背景顏色

::selection { 
    background: #eee; 
    color: #666; 
}
 

三、IOS下，input 和textarea表單取消預設會有個內陰影

一定程度上影響視覺一致，可通過設定下面程式碼去掉

-webkit-appearance:none; /*去除input預設樣式*/
-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /*去除點選高亮的顏色*/

四、使用圖片作為a標籤的點選按鈕時，當觸發touchstart的時候，往往會有一個灰色的背景

a,a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
}
 

五、禁止圖片點選放大部分安卓手機點選圖片會放大，如需要禁止放大，只需要設定css屬性

img{ 
    pointer-events: none; 
} 
//這個會讓img標籤的點選事件失效，如果想要給圖片新增點選事件就要給上面再寫一層

六、文字超出隱藏並顯示省略號

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

七、純css畫箭頭

    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
 

八、css圖片居中剪下，避免圖片變形

object-fit: cover;

九、背景圖漸變相容

FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#fee098,endColorStr=#fec76c); /*IE 6 7 8*/ 

background: -ms-linear-gradient(top, #fee098,  #fec76c);        /* IE 10 */
background:-moz-linear-gradient(top,#fee098,#fec76c);/*火狐*/ 


background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#fee098), to(#fec76c));/*谷歌*/ 

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fee098), to(#fec76c));      /* Safari 4-5, Chrome 1-9*/

background: -webkit-linear-gradient(top, #fee098, #fec76c);   /*Safari5.1 Chrome 10+*/


background: -o-linear-gradient(top, #fee098, #fec76c);  /*Opera 11.10+*/