css3 Steigung funktioniert nicht auf allen Browsern

Question

css3 Gradienten funktioniert nicht auf allen Browsern es auf Chrom funktioniert nur meinen Code

<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;"> 

Answer 1

Bitte tun, um die Art und Weise überprüfen, um Gradienten

EX hinzufügen:

<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%);"> 

Answer 2

Zunächst sollten Sie Ihr CSS von Inline in eine externe CSS-Datei verschieben, um Probleme von HTML und CSS zu trennen. Dann müssen Sie, wie Vignesh aufgezeigt hat, die Präfixe des Browsers berücksichtigen. Sie können sie manuell schreiben, aber die beste Art zu gehen ist, eine Art von Automatisierung zu verwenden, würde ich persönlich empfehlen Sass entweder oder Bourbon oder, bevorzugt, wenn Sie mit Gulp verwenden gulp-autoprefixer - das wird nicht nur die benötigten Präfixe hinzufügen automatisch, aber es wird Ihnen auch eine viel einfachere Möglichkeit geben, CSS3-Funktionen wie Gradienten mit mixins zu schreiben.

Answer 3

Wenn Sie von IE9 unterstützen müssen, verwenden Sie einen SVG (Arbeit in allen anderen keine IE-Browser als auch, so dass kein Rückfall benötigt wird)

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>

Raw SVG (die waren im obigen Beispiel 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>