Dwa kolorowe obramowania

96

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.

DrANoel
źródło
Czy chcesz użyć Javascript, aby osiągnąć efekt? jquery.malsup.com/corner
nopuck4you

Odpowiedzi:

140

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

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

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

Williham Totland
źródło
27
-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!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
<div class="border">Hi I have two border colors<br />I am also Fluid</div>

Czy tego szukasz?

rkingon
źródło
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
Matías Cánepa
To jest świetne! :)
BennKingy
33

Innym sposobem jest użycie box-shadow:

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

Zobacz przykład tutaj.

livibetter
źródło
Wolę to, ponieważ działa z border-radius w przeciwieństwie do metody zarysów
Johan
18

Czy wypróbowałeś różne style obramowania dostępne w specyfikacji CSS? Istnieją już dwa style obramowania, które mogą zaspokoić Twoje potrzeby:

border-style: ridge;

Lub

border-style: groove;
Joel Glovier
źródło
1
To było dokładnie to, czego potrzebowałem. (Naprawianie <fieldset> w IE8)
DOOManiac
15

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ć

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

A na dole:

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

Mam nadzieję, że to pomoże.

Cotovanu Andrei
źródło
6

Zamiast używać nieobsługiwanego i problematycznego konspektu, po prostu użyj

  • background-color + dopełnienie dla wewnętrznej krawędzi
  • normalne obramowanie zewnętrznej.

Przykład:

HTML:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS:

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

TEST (JSFiddle) :

Karol Horosin
źródło
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.

Pekka
źródło
3
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 .. )

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

Gabriele Petrioli
źródło
W świecie programowania nie ma rzeczy niemożliwych: Cóż, lubię to stwierdzenie cały czas :)
Tarik
-1

Po prostu napisz

style="border:medium double;"

dla tagu html

Wazy
źródło
1
To daje dwie granice z jednym kolorem między nimi.
Williham Totland
-1

Możesz użyć

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>
Gandalf
źródło
-2

Daje to ładny efekt.

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>
SorcyCat
źródło