CSS3漸變不能在所有的瀏覽器

CSS3漸變不能在所有的瀏覽器它適用於Chrome只我的代碼工作CSS3漸變不能在所有的瀏覽器

<nav class="navbar navbar-default navbar-fixed-top" style="background: -webkit-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; background: -o-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; background: -moz-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; border:2px white solid !important;box-shadow:black 2px 2px 2px;padding-bottom:40px; min-height:100px !important;border-bottom-right-radius: 20% !important;border-bottom-left-radius: 20% !important;">

來源

2016-07-30 Ahmed Mohsen

請做檢查的方式來增加梯度

EX：

<nav class="navbar navbar-default navbar-fixed-top" style="fill: #55bbeb; 
    background: #55bbeb; 
    background: -moz-linear-gradient(90deg, #55bbeb 0%, #84c450 100%); 
    background: -webkit-linear-gradient(90deg, #55bbeb 0%, #84c450 100%); 
    background: -o-linear-gradient(90deg, #55bbeb 0%, #84c450 100%); 
    background: -ms-linear-gradient(90deg, #55bbeb 0%, #84c450 100%); 
    background: linear-gradient(90deg, #55bbeb 0%, #84c450 100%);">

來源

2016-07-30 10:24:52 vignesh

請確保沒有任何CSS內聯@ alberto2000放棄..謝謝！ – vignesh

首先，您應該將CSS從內聯移動到外部CSS文件，以分離HTML和CSS的關注點。然後，正如vignesh指出的那樣，您必須考慮瀏覽器供應商前綴。您可以手動編寫它們，但最好的方法是使用某種自動化，我個人推薦Sass與Compass或Bourbon或首選，如果您使用Gulp使用gulp-autoprefixer - 這不僅會添加所需的前綴自動，但它也會讓你使用更簡單的方式來編寫css3功能，例如使用mixins的漸變。

來源

2016-07-30 10:32:08 alberto2000

如果需要從IE9支持，使用SVG（工作在所有其他無IE瀏覽器一樣，所以不需要回退）

div { 
 
    height: 200px; 
 
} 
 
.gradient { 
 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'%3E %3Cdefs%3E %3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E  %3Cstop offset='0%25' style='stop-color:rgb(255,255,0);stop-opacity:1' /%3E  %3Cstop offset='100%25' style='stop-color:rgb(255,0,0);stop-opacity:1' /%3E %3C/linearGradient%3E %3C/defs%3E %3Crect width='100' height='100' fill='url(%23grad1)' /%3E%3C/svg%3E") center/cover; 
 
}

<div class="gradient"></div>

原始SVG（這是urlencoded在上面的示例）

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'> 
    <defs> 
    <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'> 
     <stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1' /> 
     <stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' /> 
    </linearGradient> 
    </defs> 
    <rect width='100' height='100' fill='url(#grad1)' /> 
</svg>

來源

2016-07-30 10:54:54 LGSon

CSS3漸變不能在所有的瀏覽器

回答

相關問題