wake-up-neo.net

umriss nur an einer Grenze

So fügen Sie einen inset border in ein HTML-Element ein, jedoch nur auf einer Seite. Bis jetzt habe ich ein Bild dazu verwendet (GIF/PNG), das ich dann als Hintergrund verwenden und es strecken (repeat-x) und ein wenig von der Oberseite meines Blocks positionieren würde. Vor kurzem entdeckte ich die CSS-Eigenschaft outline, die großartig ist! Scheint jedoch, den gesamten Block zu umkreisen ... Ist es möglich, diese Gliederungseigenschaft für nur einen Rahmen zu verwenden? Wenn nicht, haben Sie einen CSS-Trick, der das Hintergrundbild ersetzen könnte ? (Damit ich die Farben der Umrisse später mit CSS usw. anpassen konnte) . Vielen Dank im Voraus!

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

htmlcsscss3
75
Corinne

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

Nun, da ich dein Image sehe, sollst du 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 bestimmte Antwort erarbeiten kann.

42
Giona

Mit box-shadow können Sie auf einer Seite eine Kontur erstellen. Wie bei outline ändert box-shadow die Größe des Boxmodells nicht.

Dies setzt eine Linie an die Spitze:

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

Ich habe ein jsFiddle gemacht, in dem Sie es in Aktion überprüfen können.

INSET

Verwenden Sie für einen inset-Rand das Schlüsselwort inset. Dies setzt eine kleine Linie an die Spitze:

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

Mit durch Kommas getrennten Anweisungen können mehrere Zeilen hinzugefügt werden. Dadurch wird oben und links eine Einfügungslinie eingefügt:

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

Weitere Informationen zur Funktionsweise von box-shadow finden Sie auf der MDN-Seite .

101
chowey

Versuche mit Shadow (Like border) + Border  

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;
9
Thilanka De Silva

Ich weiß, das ist alt. 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;}
}
0
Andris

Ich gebe meinem Eingabefeld gerne eine Umrandung, entferne die Umrisslinie und fokussiere stattdessen die Umrandung:

input {
  border: 1px solid grey;

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

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

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid Violet;
  }
 }
0
Robin Wieruch

Das Tolle an HTML/CSS ist, dass es in der Regel mehrere Möglichkeiten gibt, um denselben Effekt zu erzielen. Hier ist eine weitere 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/

0
thdoan