css 顏色漸變 兼容性


參考文獻:http://caibaojian.com/css3-background-gradient.html

       https://www.cnblogs.com/xzzzys/p/7495725.html

 

目標:

一開始用 background: linear-gradient(to right, #000,#fff)  :

谷歌、火狐、歐朋(都是新版)可以兼容

ie9  不可以兼容

所以為了ie或其他較低版本瀏覽器兼容:

.gradient{

  width: 973px;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* 兼容Safari4-5, chrome1-9 */
  background: -moz-linear-gradient(right, #000000 0%, #ffffff 100%); /* firefox */
  background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* chrome */
  background: -o-linear-gradient(right, #000000 0%,#ffffff 100%); /* opera */
  background: -ms-linear-gradient(right, #000000 0%,#ffffff 100%); /* ie */
  background: linear-gradient(to right, #000000,#ffffff); /* firefox */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1)"; /* 兼容IE8~IE9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* 兼容IE5~IE9 */
}

注意:

1、filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); 中 GradientType=1 代表水平 , GradientType=0 代表從上往下(默認從上往下)

  還要特別值得注意的是 startColorstr='#000000' 中的 16進制顏色 不能簡寫 為 #000 ,不然也不會識別達到效果

2、background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%);  中  left開始位置,其他都都是結束位置

這樣就可以兼容了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM