首頁 > web前端 > css教學 > css如何讓背景色漸層相容的寫法詳解

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

黄舟
發布: 2017-07-19 10:54:17
原創
1928 人瀏覽過

最近在專案中,有很多地方都用到了線性漸變,例如:表單提交按鈕的背景,資料展示的標題背景等等,按照以前的做法是切 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板