Umriss nur an einem Rand

So wenden Sie einen eingefügten Rahmen auf ein HTML-Element an, jedoch nur auf einer Seite. Bis jetzt habe ich ein Bild verwendet, um dies zu tun (GIF / PNG), das ich dann als Hintergrund verwenden und es dehnen (Wiederholung-x) und ein wenig von der Oberseite meines Blocks entfernt positionieren würde. Kürzlich habe ich die Gliederungs- CSS-Eigenschaft entdeckt, die großartig ist! Aber scheint den ganzen Block zu umkreisen ... Ist es möglich, diese Gliederungseigenschaft zu verwenden, um sie nur an einem Rand auszuführen? Wenn nicht, haben Sie auch einen CSS-Trick, der das Hintergrundbild ersetzen könnte? (damit ich die Farben der Gliederung später mit CSS usw. personalisieren kann). Danke im Voraus!

Hier ist ein Bild von dem, was ich erreichen möchte : http://exiledesigns.com/stack.jpg

Die Gliederung gilt in der Tat für das gesamte Element .

Nachdem ich Ihr Bild gesehen habe, erfahren Sie hier, wie Sie es erreichen.

.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 siehe externe Demo. )

Alle Größen und Farben sind nur Platzhalter. Sie können sie so ändern, dass sie genau dem gewünschten Ergebnis entsprechen.

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 spezifische Antwort ausarbeiten kann.

Sie können box-shadowdamit einen Umriss auf einer Seite erstellen. Wie outline, box-shadowändert nicht die Größe des Box-Modells.

Dies setzt eine Linie an die Spitze:

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

Ich habe eine jsFiddle erstellt, in der Sie sie in Aktion testen können.

EINSATZ

Für einen Einsatz Grenze, verwenden Sie den Einsatz Stichwort. Dies setzt eine eingefügte Linie oben:

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

Mit durch Kommas getrennten Anweisungen können mehrere Zeilen hinzugefügt werden. Dies setzt eine eingefügte Linie oben und links:

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

Weitere Details dazu box-shadow finden Sie auf der MDN-Seite .

Versuchen Sie es mit Schatten (wie Rand) + Rand

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

Ich weiß, dass das alt ist. Aber ja. Ich bevorzuge eine viel kürzere Lösung als die Antwort von Giona

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}

Ich möchte meinem Eingabefeld einen Rahmen geben, den Umriss im Fokus entfernen und stattdessen den Rahmen "umreißen":

input {
  border: 1px solid grey;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

Sie können dies auch mit einem transparenten Rand tun:

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

Das Tolle an HTML / CSS ist, dass es normalerweise mehr als einen Weg gibt, um den gleichen Effekt zu erzielen. Hier ist eine andere Lösung, die macht, 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/

nur eine Seite outline funktioniert nichtborder-left/right/top/bottom

Wenn ich Ihren Kommentar richtig bekomme