Verschiedene Ränder in einem einzigen div

Ich habe ein Problem mit CSS verwenden verschiedene Ränder in meinem div. Ich brauche eine Karte (div), die auf der linken, oberen und rechten Seite des Div. Im unteren Bereich benötige ich jedoch ein bestimmtes Rahmenbild.Verschiedene Ränder in einem einzigen div

Ich bin in der Lage, das Bild in der unteren Grenze oder die "normale" Grenze auf den drei Seiten haben, aber ich weiß nicht, wie Sie beide gleichzeitig haben.

Wenn ich das Bild, geht es an alle Grenzen.

Ich verwende den folgenden Code zum unteren Bildrand:

border-width: 0px 0px 32px 0px; 
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat;

Kennen Sie einen Weg, um eine normale feste Grenze an den drei Seiten und das Bild in der unteren Grenze zu haben?

Wenn ich die border-width auf mehr als Null ändern, erscheint das Bild, nicht die normale feste Grenze.

Vielen Dank im Voraus!

Quelle

2017-09-20 Artur Quirino

Bitte überprüfen Sie die folgenden Antworten, wenn es hilft. – bhansa

Sie können zuerst den Rahmen für das untere Bild festlegen und dann für andere Seiten festlegen.

border-image:url("http://example.com/image1.png"); 

/* setting borders for other sides */ 
border-top:1px solid #000; 
border-left:1px solid #000; 
border-right:1px solid #000;

Darunter für andere Seiten oben, rechts und links festgelegt.

Quelle

2017-09-20 17:00:31 bhansa

Sie könnten :after verwenden, um diesen Effekt zu simulieren.

div { 
 
    border: 1px solid black; 
 
    border-bottom: 0px; 
 
} 
 
div:after { 
 
    content: ''; 
 
    width: calc(100% + 2px); 
 
    margin-left: -1px; 
 
    background: white; 
 
    display:block; 
 
    background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66); 
 
    background-repeat: repeat; 
 
    height: 10px; 
 
}

<div>test</div>

Quelle

2017-09-20 17:03:58 Jonathan

Ich glaube, das wird auch funktionieren. Ich habe es nicht benutzt, weil der andere Ansatz für mich einfacher war. Aber das ist auch eine mögliche Lösung, glaube ich. –

Vergessen Sie nicht, Ihre Antwort zu akzeptieren. So wissen die Leute, dass Sie eine Lösung für Ihre Frage gefunden haben. – Jonathan

Ich war tatsächlich in der Lage, dies zu tun, indem ein div in einem anderen div hinzuzufügen.

.div-outside-class { 
border-width: 1px 1px 0px 1px; 
border-style: solid; 
border-color: #e6e9ee; 
border-radius: 10px; 
} 

.div-inside-class { 
border-style: solid; 
border-width: 0px 0px 32px 0px; 
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat; 
margin-bottom: -16px; 
}

HTML-Code ist so etwas wie das:

<div class="div-outside-class"> 
    <div class="div-inside-class> 
    </div> 
</div>

Quelle

2017-09-20 18:03:39

Verschiedene Ränder in einem einzigen div

Antwort

Verwandte Themen