Wie implementiert man zwei verschiedene lineare Gradientenrahmen zu einem Element?

Question

Ich bin wirklich neu in CSS, und ich habe eine Aufgabe zu erstellen 2 linear-Farbverlauf als Grenze eines div wie im Bild unten.

Ich habe border-image für das Innere verwendet, aber ich weiß nicht, wie man den anderen Rand erstellt.

border-image: linear-gradient(#EEEEEE ,#666666, #EEEEEE) 1 1% !important; 

Answer 1

ein zusätzliches Pseudoelement verwenden:

Ich glaube nicht, es möglich ist, dieses Element mit genau das zu tun (das heißt, keine zusätzliche Pseudo/real Elemente) Verwenden Sie border-image, aber Sie können es tun, indem Sie ein Pseudo-Element verwenden, indem Sie einen Rand auf den Eltern und den anderen auf dem Pseudo-Element wie im folgenden Ausschnitt setzen.

div{ 
 
    position: relative; 
 
    height: 200px; 
 
    width: 400px; 
 
    border-image-source: linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF); 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-image-slice: 1; 
 
} 
 
div:before{ 
 
    position: absolute; 
 
    content: ''; 
 
    height: calc(100% - 10px); 
 
    width: calc(100% - 10px); 
 
    border-image-source: linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE); 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-image-slice: 1; 
 
}

<div></div>

---

ein einzelnes Element verwenden:

Mit nur einem einzigen Element (keine Pseudo/real-Elemente), können wir sortieren diese aus erreichen ^* mit background-image aber nicht mit border-image. Es ist sehr viel komplexer, da wir für jeden der 8 (4 äußeren + 4 inneren) Grenzen einen Farbstreifen erstellen und diesen entsprechend platzieren müssen.

^{* - Dies erzeugt nicht die exakt gleiche Ausgabe wie border-image, ist aber nahe genug.}

div{ 
 
    height: 200px; 
 
    width: 400px; 
 
    background: linear-gradient(to right, #FFFFFF, #FFFFFF), 
 
    linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF), 
 
    linear-gradient(to right, #FFFFFF, #FFFFFF), 
 
    linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF), 
 
    linear-gradient(to right, #EEEEEE, #EEEEEE), 
 
    linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE), 
 
    linear-gradient(to right, #EEEEEE, #EEEEEE), 
 
    linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%, calc(100% - 10px) 5px, 5px calc(100% - 10px), calc(100% - 10px) 5px, 5px calc(100% - 10px); 
 
    background-position: 0px 0px, 100% 0px, 0px 100%, 0px 0px, 5px 5px, calc(100% - 5px), 0px calc(100% - 5px), 5px 5px; 
 
}

<div></div>