css如何讓背景色漸層相容的寫法詳解

最近在專案中，有很多地方都用到了線性漸變，例如：表單提交按鈕的背景，資料展示的標題背景等等，按照以前的做法是切 1px 圖片然後 repeat-x。下面我將介紹如何用 css 來完成效果。

css3：linear-gradient

例如：黑色漸層到白色，程式碼如下：

##

.gradient{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

#說明：

linear-gradient 具體用法點此進入

。

ie 濾鏡：filter

######linear-gradient 在ie9 以下是不支援的，所以對於ie6 - ie8 我們可以使用###濾鏡###來解決，程式碼如下：############

.gradient{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

###由於filter 是ie 的私有屬性，所以我們需要針對ie9 單獨處理濾鏡效果，程式碼如下：####### ######

:root {filter:none;}

######總結：#########綜上所述，線性漸變的相容寫法如下：###########

.gradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}:root .gradient{filter:none;}

以上是css如何讓背景色漸層相容的寫法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！