Klient chce mieć dwa kolorowe obramowania, aby uzyskać efekt wytłaczania. Czy mogę to zrobić na jednym elemencie? Miałem nadzieję, że uniknę łączenia dwóch elementów DOM z osobnymi ramkami.
Tak: skorzystaj z outlinenieruchomości; działa jak druga granica poza twoją granicą. Uważaj jednak, może wchodzić w interakcje w dziwny sposób z marginesami, wyściółkami i cieniami. W niektórych przeglądarkach może być również konieczne użycie prefiksu specyficznego dla przeglądarki; aby upewnić się, że odbierze go: -webkit-outlinei tym podobne (chociaż WebKit w szczególności tego nie wymaga).
Może to być również przydatne w przypadku, gdy chcesz wyrzucić kontur dla niektórych przeglądarek (na przykład, jeśli chcesz połączyć kontur z cieniem; w WebKit kontur znajduje się wewnątrz cienia; w FireFox jest to na zewnątrz, więc -moz-outline: 0przydaje się, aby upewnić się, że nie otrzymasz wyraźnej linii wokół pięknego cienia CSS).
Edycja: Niektórzy ludzie zauważyli, że outlinenie współgra dobrze z IE <8. Chociaż to prawda; obsługa IE <8 naprawdę nie jest czymś, co powinieneś robić.
-1 dla „wspieranie IE <8 naprawdę nie jest czymś, co powinieneś robić”. Brak obsługi IE6 może być w porządku. Ale brak obsługi IE7 jest śmieszny, żadna strona z nietechnicznymi odbiorcami nie może sobie na to pozwolić
Pekka
6
outlineistnieje od CSS2.
BoltClock
156
+1 za brak obsługi IE 7, podczas gdy Twoja witryna powinna zawsze działać i dobrze wyglądać w IE 7, pełne wsparcie nie jest konieczne. zwłaszcza jeśli jest to tylko dwukolorowa ramka. Osobiście używam box-shadow i innych „zaawansowanych” funkcji. IE7 nie widzi box-shadow, ... wielka sprawa. nie ma powodu, aby używać gorzej dopasowanego, zbyt skomplikowanego lub nawet przestarzałego rozwiązania, aby obejść dziwactwa IE7.
Marian Theisen,
2
Również zobaczyć ten punkt odniesienia dla dobrych powodów dostępności nie włamać właściwość obrysu celów projektowych: outlinenone.com
Joel Glovier
11
Jedna uwaga, outlinejest mniej wszechstronna niż border. W szczególności W3C mówi : „Uwaga. Kontur jest taki sam ze wszystkich stron. W przeciwieństwie do obramowań, nie ma właściwości„ kontur do góry ”ani„ kontur do lewej ” . (Podkreślenie moje.)
Bob Stein
68
To jest bardzo możliwe. Wystarczy trochę sztuczek CSS!
Rzeczywiście jest to trudne, ale degraduje się z wdziękiem i działa nawet w standardowej przeglądarce mojego HTC (Android)! Jeśli używasz border-radius, spróbuj zmniejszyć promień wewnętrznej granicy o jeden piksel, co sprawi, że przerwa między dwoma zaokrąglonymi krawędziami będzie prawie niezauważalna.
grypa
To jest miłe. Używanie bottom:1pxraczej niż height:100%działało lepiej dla mnie tylko dla dolnej granicy :)
Nick
jeśli masz dopełnienie dla div.border, stwierdziłem, że dodanie ujemnego marginesu o tych samych wymiarach dla elementu div.border:beforepomogło utrzymać wszystko w wierszu. Może jest na to lepszy sposób? jsFiddle
NW Tech
+1 za używanie pseudoelementów. Myślę, że ta odpowiedź jest lepsza niż w przypadku Willihama Totlanda
Działa dobrze, ale tylko wtedy, gdy masz treści z tłem.
Culme
4
Jeśli przez „wytłaczanie” masz na myśli dwie obramowania wokół siebie w dwóch różnych kolorach, istnieje outlinewłaściwość ( outline-left, outline-right....), ale jest ona słabo obsługiwana w rodzinie IE (a mianowicie, IE6 i 7 w ogóle jej nie obsługują ). Jeśli potrzebujesz dwóch obramowań, rzeczywiście najlepszy byłby drugi element opakowania.
Jeśli masz na myśli użycie dwóch kolorów w tej samej ramce. Użyj np
border-right:1px white solid;
border-left:1px black solid;
border-top:1px black solid;
border-bottom:1px white solid;
istnieją specjalne border-stylesdo tego jak dobrze ( ridge, outseti inset), ale mają tendencję do zmieniania różnych przeglądarkach w moim doświadczeniu.
Uważam, że to, o co prosi, jest czymś w rodzaju, border : black white; co oznacza zdefiniowanie dwóch różnych kolorów dla jednej ramki, która wygląda sekwencyjnie w tym samym czasie.
Tarik
1
@Braveyard ah, rozumiem. To byłoby teoretycznie możliwe przy użyciu, outlineale nie będzie działać dobrze w IE <8
Pekka
3
Zauważ, że istnieje tylko zarys ... niestety nie ma czegoś takiego jak kontur-lewy, kontur-prawy, kontur-góra lub kontur-dół.
David Sherret
-1
Nie jest możliwe, ale należy sprawdzić, czy border-stylewartości podoba inset, outsetczy jakiś inny, realizowane żądany efekt .. ( Wątpię jednak .. )
Odpowiedzi:
Tak: skorzystaj z
outline
nieruchomości; działa jak druga granica poza twoją granicą. Uważaj jednak, może wchodzić w interakcje w dziwny sposób z marginesami, wyściółkami i cieniami. W niektórych przeglądarkach może być również konieczne użycie prefiksu specyficznego dla przeglądarki; aby upewnić się, że odbierze go:-webkit-outline
i tym podobne (chociaż WebKit w szczególności tego nie wymaga).Może to być również przydatne w przypadku, gdy chcesz wyrzucić kontur dla niektórych przeglądarek (na przykład, jeśli chcesz połączyć kontur z cieniem; w WebKit kontur znajduje się wewnątrz cienia; w FireFox jest to na zewnątrz, więc
-moz-outline: 0
przydaje się, aby upewnić się, że nie otrzymasz wyraźnej linii wokół pięknego cienia CSS).Edycja: Niektórzy ludzie zauważyli, że
outline
nie współgra dobrze z IE <8. Chociaż to prawda; obsługa IE <8 naprawdę nie jest czymś, co powinieneś robić.źródło
outline
istnieje od CSS2.outline
jest mniej wszechstronna niżborder
. W szczególności W3C mówi : „Uwaga. Kontur jest taki sam ze wszystkich stron. W przeciwieństwie do obramowań, nie ma właściwości„ kontur do góry ”ani„ kontur do lewej ” . (Podkreślenie moje.)To jest bardzo możliwe. Wystarczy trochę sztuczek CSS!
Czy tego szukasz?
źródło
border-radius
, spróbuj zmniejszyć promień wewnętrznej granicy o jeden piksel, co sprawi, że przerwa między dwoma zaokrąglonymi krawędziami będzie prawie niezauważalna.bottom:1px
raczej niżheight:100%
działało lepiej dla mnie tylko dla dolnej granicy :)div.border
, stwierdziłem, że dodanie ujemnego marginesu o tych samych wymiarach dla elementudiv.border:before
pomogło utrzymać wszystko w wierszu. Może jest na to lepszy sposób? jsFiddleInnym sposobem jest użycie
box-shadow
:Zobacz przykład tutaj.
źródło
Czy wypróbowałeś różne style obramowania dostępne w specyfikacji CSS? Istnieją już dwa style obramowania, które mogą zaspokoić Twoje potrzeby:
Lub
źródło
Kontur jest dobry, ale tylko wtedy, gdy chcesz, aby granica była dookoła.
Powiedzmy, że jeśli chcesz zrobić to tylko na dole lub na górze, możesz użyć
A na dole:
Mam nadzieję, że to pomoże.
źródło
Zamiast używać nieobsługiwanego i problematycznego konspektu, po prostu użyj
Przykład:
HTML:
CSS:
TEST (JSFiddle) :
Pokaż fragment kodu
źródło
Jeśli przez „wytłaczanie” masz na myśli dwie obramowania wokół siebie w dwóch różnych kolorach, istnieje
outline
właściwość (outline-left
,outline-right
....), ale jest ona słabo obsługiwana w rodzinie IE (a mianowicie, IE6 i 7 w ogóle jej nie obsługują ). Jeśli potrzebujesz dwóch obramowań, rzeczywiście najlepszy byłby drugi element opakowania.Jeśli masz na myśli użycie dwóch kolorów w tej samej ramce. Użyj np
istnieją specjalne
border-styles
do tego jak dobrze (ridge
,outset
iinset
), ale mają tendencję do zmieniania różnych przeglądarkach w moim doświadczeniu.źródło
border : black white;
co oznacza zdefiniowanie dwóch różnych kolorów dla jednej ramki, która wygląda sekwencyjnie w tym samym czasie.outline
ale nie będzie działać dobrze w IE <8Nie jest możliwe, ale należy sprawdzić, czy
border-style
wartości podobainset
,outset
czy jakiś inny, realizowane żądany efekt .. ( Wątpię jednak .. )CSS3 ma właściwości border-image , ale nie wiem jeszcze o obsłudze przeglądarek (więcej informacji na http://www.css3.info/preview/border-image/ ).
źródło
Po prostu napisz
style="border:medium double;"
dla tagu html
źródło
Możesz użyć
źródło
Daje to ładny efekt.
źródło