zarys tylko na jednej krawędzi


86

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


7
Twój link nie działa. Możesz po prostu wkleić obraz bezpośrednio do pytania za pomocą narzędzia graficznego.
toddmo

Odpowiedzi:


46

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


Cześć Giona, właśnie dodałem obrazek do mojego pytania, aby było jaśniejsze: potrzebuję przestrzeni między granicami mojego bloku a moją granicą.
Corinne

Dzięki @GionaF, ale wygląda na to, że granica nadal znajduje się „nad” blokiem, a nie „wewnątrz”. (co to jest \ a0? tylko losowa zawartość do utworzenia bloku?) exiledesigns.com/stack2.jpg (próbowałem z 5 pikselami wypełnienia, ale nic się nie zmieniło)
Corinne

1
@DominicTobias, właściwie nie pamiętam ;-)
Giona

1
Dla porównania \a0jest to niezłamująca przestrzeń.

1
W moim przypadku wziąłem to i trochę zmodyfikowałem. Potrzebne było dodanie pozycji absolutnej na górze i szerokości 100% na elemencie z pseudoklasą: before oraz względnej pozycji elementu, na wypadek gdyby ktoś inny miał ten sam problem.
josh1978

130

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 .


1
Podoba mi się to kreatywne podejście, dziękuję za udostępnienie!
NPC

Nie utworzyłeś wstawki i nie wyjaśniasz składni box-shadow. Dzięki.
toddmo

Ten ma ograniczenia, jeśli potrzebne jest niestandardowe obramowanie!
Andris


1

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;}
}

0

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;
  }
 }

-1

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/


-2

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

jeśli otrzymam poprawnie twój komentarz

wprowadź opis obrazu tutaj


2
Jak zrobić wstawkę border-left / right / etc? Na przykład 3 piksele od granicy bloku, ale wewnątrz ?
Corinne

@CorinneStoppelli czy możesz wyjaśnić?
Database_Query

@Database_Query, myślę, że przegapiłeś część korzystania z właściwości konturu (lub podobnej), co oznacza, że ​​nie chce dodawać większej wagi / wzrostu do div. Właściwość border faktycznie dodaje, ale kontur nie. Opcja box-shadow wydaje się być lepszą opcją, nawet jeśli musisz trochę pobawić się jej opcjami.
xarlymg89
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.