zarys tylko na jednej krawędzi

Jak zastosować obramowanie wstawki do elementu HTML, ale tylko po jednej stronie. Do tej pory używałem do tego obrazu (GIF / PNG), którego następnie używałbym jako tła, rozciągałem go (powtórz-x) i ustawiałem trochę poza górną częścią mojego bloku. Niedawno odkryłem właściwość Outline CSS, która jest świetna! Ale wydaje się, że okrąża cały blok ... Czy możliwe jest użycie tej właściwości konturu, aby zrobić to tylko na jednej granicy? Ponadto, jeśli nie, czy masz jakąś sztuczkę CSS, która mogłaby zastąpić obraz tła? (abym mógł później spersonalizować kolory konturu za pomocą CSS itp.). Z góry dziękuję!

Oto obraz tego, co próbuję osiągnąć: http://exiledesigns.com/stack.jpg

Zarys rzeczywiście dotyczy całego elementu .

Teraz, gdy widzę Twój obraz, oto jak to osiągnąć.

.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>

(Lub zobacz zewnętrzne demo. )

Wszystkie rozmiary i kolory są tylko symbolami zastępczymi, możesz je zmienić, aby dopasować dokładnie do pożądanego wyniku.

Ważna uwaga : .element musi mieć display:block;(domyślnie dla elementu DIV), aby to działało. Jeśli tak nie jest, podaj pełny kod, abym mógł ułożyć konkretną odpowiedź.

Możesz użyć, box-shadowaby utworzyć kontur po jednej stronie. Podobnie outline, box-shadownie zmienia rozmiaru modelu pudełkowego.

To umieszcza linię na górze:

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

Zrobiłem jsFiddle, na którym można to sprawdzić w akcji.

WSTAWKA

W przypadku obramowania wstawki użyj słowa kluczowego inset . To umieszcza wstawioną linię na górze:

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

Wiele wierszy można dodać za pomocą instrukcji oddzielonych przecinkami. Spowoduje to umieszczenie linii wstawki na górze i po lewej stronie:

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

Aby uzyskać więcej informacji o tym box-shadow, jak to działa, odwiedź stronę MDN .

Spróbuj z Shadow (Like border) + Border

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

Wiem, że to jest stare. Ale tak. Wolę rozwiązanie znacznie krótsze niż odpowiedź Giony

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

Lubię nadawać mojemu polu wejściowemu obramowanie, usuwać kontur przy fokusie i zamiast tego „zarysowywać” obramowanie:

input {
  border: 1px solid grey;

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

Możesz to również zrobić z przezroczystą ramką:

input {
  border: 1px solid transparent;

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

Wspaniałą rzeczą w HTML / CSS jest to, że zazwyczaj istnieje więcej niż jeden sposób na osiągnięcie tego samego efektu. Oto inne rozwiązanie, które robi to, co chcesz:

<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/

tylko jedna strona outlinenie będzie działać, możesz użyćborder-left/right/top/bottom

jeśli otrzymam poprawnie twój komentarz