Linearer Farbverlauf für mehr als nur CSS Hintergrund?

Es ist möglich, linear-gradient für die CSS-Eigenschaften background oder background-image anzugeben. Ist dies auch für das Objekt als Ganzes möglich, einschließlich Rahmen, Umriss usw.? Oder ein Filter, der das Gleiche macht?Linearer Farbverlauf für mehr als nur CSS Hintergrund?

Quelle

2017-01-01 posfan12

Bitte klären Sie Ihr spezifisches Problem oder fügen Sie weitere Details hinzu, um genau das hervorzuheben, was Sie benötigen. Wie es derzeit geschrieben wird, ist es schwer zu sagen, was genau Sie fragen. –

Dieser Für border gradient ist ..

.ps-top-to-bottom { 
 
    position: relative; 
 
    border-top: 3px solid black; 
 
} 
 
.ps-top-to-bottom:before, .ps-top-to-bottom:after { 
 
    content: ""; 
 
    position: absolute; 
 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); 
 
    background-image: -webkit-linear-gradient(#000, transparent); 
 
    background-image: -moz-linear-gradient(#000, transparent); 
 
    background-image: -o-linear-gradient(#000, transparent); 
 
    background-image: linear-gradient(#000, transparent); 
 
    top: -3px; 
 
    bottom: -3px; 
 
    width: 3px; 
 
} 
 
.ps-top-to-bottom:before { 
 
    left: -3px; 
 
} 
 
.ps-top-to-bottom:after { 
 
    right: -3px; 
 
}

<!-- THIS IS FOR BORDER--> 
 
<div class="ps-top-to-bottom"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
</div>

Quelle

2017-01-01 16:59:11

Die Ränder sind in Chrome nicht richtig ausgerichtet, aber dies ist eine gute Antwort, da es sich um eine reine CSS-Lösung handelt. Eine andere Lösung, über die ich gelesen habe, ist die Verwendung von SVG-Filtern in HTML, obwohl ich sie noch nicht getestet habe (und es ist offensichtlich kein reines CSS.) – posfan12

Wenn Sie SVG-Filter benötigen, klicken Sie auf diesen Link [http://www.w3schools.com. com/graphics/svg_fegaussianblur.asp] (http://www.w3schools.com/graphics/svg_fegaussianblur.asp) erhalten Sie alle Informationen –

-1

#grad { 
 
    background: red; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(red, yellow); /* Standard syntax */ 
 
}

<div id="grad">hola mundo</div>

und Ergebnis ist:

Quelle

2017-01-01 16:43:57 hubman

Dies funktioniert nur für die Hintergrundeigenschaft. Ich suche nach etwas, das auch für Grenzen, Umrisse, usw. gilt. der ganze Behälter. – posfan12

Linearer Farbverlauf für mehr als nur CSS Hintergrund?

Antwort

Verwandte Themen