Umriss auf nur einer Grenze

Wie man einen Einschubrahmen in ein HTML-Element anwendet, aber nur auf einer Seite davon. Bis jetzt habe ich ein Bild dazu verwendet (GIF/PNG), das ich dann als Hintergrund verwenden würde (repeat-x) und etwas von meinem Block entfernt. Kürzlich entdeckte ich die Gliederung CSS-Eigenschaft, die großartig ist! Aber scheint den ganzen Block zu umkreisen ... Ist es möglich, diese Umriss-Eigenschaft zu verwenden, um es nur an einer Grenze zu tun? Wenn nicht, haben Sie einen CSS-Trick, der das Hintergrundbild ersetzen könnte? (damit ich später die Farben des Umrisses mit CSS personalisieren konnte). Vielen Dank im Voraus!Umriss auf nur einer Grenze

Hier ist ein Bild von dem, was zu erreichen versuchen: http://exiledesigns.com/stack.jpg

Quelle

2012-10-01 Corinne

Ihr Link tot ist. Sie können das Bild direkt mit dem Bildwerkzeug in die Frage einfügen. – toddmo

Umriss tatsächlich tut apply to the whole element.

Jetzt, wo ich dein Bild sehe, ist hier, wie man es erreicht.

.element { 
 
    padding: 5px 0; 
 
    background: #CCC; 
 
} 
 
.element:before { 
 
    content: "\a0"; 
 
    display: block; 
 
    padding: 2px 0; 
 
    line-height: 1px; 
 
    border-top: 1px dashed #000; 
 
} 
 
.element p { 
 
    padding: 0 10px; 
 
}

<div class="element"> 
 
    <p>Some content comes here...</p> 
 
</div>

(Oder sehen external demo.)

Alle Größen und Farben sind nur Platzhalter, können Sie es, die genaue gewünschte Ergebnis entsprechen ändern.

Wichtiger Hinweis: .element muss display:block; (Standard für ein div) haben, damit dies funktioniert. Wenn dies nicht der Fall ist, geben Sie bitte Ihren vollständigen Code an, damit ich eine konkrete Antwort ausarbeiten kann.

Quelle

2012-10-01 10:56:29 Giona

Hallo Giona, ich habe meiner Frage ein Bild hinzugefügt, um es klarer zu machen: Ich brauche Platz zwischen den Grenzen meines Blocks und meiner Grenze. – Corinne

@CorinneStoppelli yup, hab es jetzt ... check my edit – Giona

Danke @GionaF, aber es scheint, dass die Grenze immer noch "über" dem Block und nicht "innen" ist. (Was ist \ a0? Nur zufällige Inhalte, um den Block zu erstellen?) http://www.exiledesigns.com/stack2.jpg (Ich versuchte mit 5px Polsterung aber nichts geändert) – Corinne

-2

nur eine Seite outline nicht funktionieren können Sie die border-left/right/top/bottom

wenn ich Ihren Kommentar

einen immer richtig verwenden

enter image description here

Quelle

2012-10-01 10:55:43

Wie wird der Rand links/rechts/etc eingefügt? Wie zum Beispiel, 3 Pixel entfernt von der Blockgrenze, aber ** innen **? – Corinne

@CorinneStoppelli könnten Sie das erklären? –

Entschuldigung hakra! Ich habe meiner ersten Frage ein Bild hinzugefügt, um es klarer zu machen! – Corinne

Sie können box-shadow verwenden, um einen Umriss auf einer Seite zu erstellen. Wie outline, ändert box-shadow nicht die Größe des Boxmodells.

Dies stellt eine Linie auf:

box-shadow: 0 -1px 0 #000;

ich ein jsFiddle gemacht, wo Sie es heraus in Aktion überprüfen.

EINSCHUB

Für eine Einsatz Grenze, verwenden Sie das Einsatz Stichwort. Dadurch wird eine Einfügezeile eingefügt:

box-shadow: 0 1px 0 #000 inset;

Mehrere Zeilen können mit kommagetrennten Anweisungen hinzugefügt werden.Dies stellt einen Einsatz Linie auf der Oberseite und links:

box-shadow: 0 1px 0 #000 inset, 
      1px 0 0 #000 inset;

Weitere Informationen dazu, wie box-shadow Werke, die MDN page überprüfen.

Quelle

2013-09-17 04:34:58 chowey

Ich mag diesen kreativen Ansatz, danke fürs Teilen! – NPC

Sie haben keinen eingebetteten Rahmen erstellt, und Sie erklären die Syntax für Box-Shadow nicht. Vielen Dank. – toddmo

Große, clevere Lösung. Vielen Dank! – grammar

mit Schatten-Versuchen (Like Grenze) + Border

border-bottom: 5px solid #fff; 
box-shadow: 0 5px 0 #ffbf0e;

Quelle

2013-11-07 05:29:54

Die große Sache über HTML/CSS ist, dass es in der Regel mehr als einen Weg, um die gleiche Wirkung zu erzielen. Hier ist eine andere Lösung, das tut, was Sie wollen:

<nav id="menu1"> 
    <ul> 
     <li><a href="#">Menu Link 1</a></li> 
     <li><a href="#">Menu Link 2</a></li> 
    </ul> 
</nav> 

nav { 
    background:#666; 
    margin:1em; 
    padding:.5em 0; 
} 
nav ul { 
    border-top:1px dashed #fff; 
    list-style:none; 
    padding:.5em; 
} 
nav ul li { 
    display:inline-block; 
} 
nav ul li a { 
    color:#fff; 
}

http://jsfiddle.net/10basetom/uCX3G/1/

Quelle

2013-11-16 07:42:53 10basetom

Umriss auf nur einer Grenze

Antwort

Verwandte Themen