Anwenden Gradient-Effekt auf der Grenze eines div

Question

Ich versuche, ein div auf der Grenze Ebene mit zwei Farben einfügen Farbverlauf mit Css geben. Aber ich bin nicht in der Lage, das gleiche wie im Beispiel gezeigt zu bekommen. Der Farbverlauf-Effekt sollte von oben bis Mitte des quadratischen Bereichs sein. Ich habe den Bereich des Farbverlaufs im Bild markiert.

Answer 1

Bitte überprüfen Sie diesen Code

.box { 
 
    margin: 50px auto; 
 
    width: 250px; 
 
    height: 250px; 
 
    padding: 20px; 
 
    border-top: 10px solid #3e3ad5; 
 
    border-bottom: 10px solid #d53a3a; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    background-position: 0 0, 100% 0; 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: 10px 100%; 
 
    -moz-background-size: 10px 100%; 
 
    background-size: 10px 100%; 
 
    background-image: -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%), -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%); 
 
    background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%); 
 
    background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%); 
 
    background-image: linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%), linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%); 
 
}

<div class="box"><span>Border Gradient</span></div>