Różnica między konturem a ramką

Czy ktoś wie o jakiejkolwiek różnicy między właściwościami „granicy” i „konturu” w CSS? Jeśli nie ma różnicy, to dlaczego istnieją dwie właściwości tej samej rzeczy?

Od: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Właściwość konturu CSS jest mylącą właściwością. Kiedy po raz pierwszy się o tym dowiadujesz, trudno jest zrozumieć, w jaki sposób różni się on nawet od nieruchomości granicznej. W3C wyjaśnia, że ​​ma następujące różnice:

1. Linie nie zajmują miejsca.

2. Linie mogą być nie prostokątne.

Oprócz kilku innych odpowiedzi ... oto kilka innych różnic, o których mogę myśleć:

1) Zaokrąglone rogi

borderobsługuje zaokrąglone rogi border-radiuswłaściwości outlinenie.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

SKRZYPCE

(Uwaga: chociaż firefox ma -moz-outline-radiuswłaściwość, która pozwala na zaokrąglanie rogów na konspekcie ... ta właściwość nie jest zdefiniowana w żadnym standardzie CSS i nie jest obsługiwana przez inne przeglądarki ( źródło ))

2) Stylizacja tylko z jednej strony

granica ma właściwości do stylu każdej strony border-top:, border-left:etc.

zarys nie może tego zrobić. Nie ma top-top: itd. Wszystko albo nic. (zobacz ten post SO )

3) przesunięcie

Zarys obsługuje przesunięcie z właściwością Zarys-przesunięcie . granica nie.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

SKRZYPCE

Uwaga: wszystkie główne przeglądarki obsługują outline-offsetoprócz Internet Explorera

Oprócz innych odpowiedzi kontury są zwykle używane do debugowania. Opera ma fajne style CSS użytkownika, które wykorzystują właściwość konturu, aby pokazać, gdzie znajdują się wszystkie elementy w dokumencie.

Jeśli próbujesz dowiedzieć się, dlaczego element nie pojawia się w oczekiwanym miejscu lub w oczekiwanym rozmiarze, dodaj kilka konturów i sprawdź, gdzie znajdują się elementy.

Jak już wspomniano, kontury nie zajmują miejsca. Kiedy dodajesz ramkę, całkowita szerokość / wysokość elementu w dokumencie zwiększa się, ale nie dzieje się tak w przypadku konturu. Nie można także ustawiać konturów po określonych stronach, takich jak granice; to wszystko albo nic.

tldr;

W3C wyjaśnia, że ​​ma następujące różnice:

• Kontury nie zajmują miejsca.
• Kontury mogą nie być prostokątne.

Źródło

Dla ułatwienia należy użyć konspektu

Należy również zauważyć, że głównym celem konspektu jest dostępność. Ustawienie go na zarys: nie należy go unikać.

Jeśli musisz go usunąć, być może lepszym pomysłem jest zapewnienie alternatywnego stylu:

Widziałem sporo wskazówek, jak usunąć wskaźnik ostrości za pomocą konturu: brak lub konturu: 0. Nie rób tego, chyba że zamienisz kontur na coś innego, co ułatwi sprawdzenie, który element ma fokus na klawiaturze. Usunięcie wizualnego wskaźnika fokusu na klawiaturze sprawi, że nawigacja za pomocą klawiatury i korzystanie z niej będą bardzo trudne.

Źródło: „Nie usuwaj konturu z kontrolek linków i formularzy”, 365 Berea Street

Więcej zasobów

• http://outlinenone.com/

Praktyczne zastosowanie konturu dotyczy przejrzystości. Jeśli masz element nadrzędny z tłem, ale chcesz, aby granica elementu podrzędnego była przezroczysta, aby tło elementu nadrzędnego było widoczne, musisz użyć „konspektu” zamiast „ramki”. Obramowanie może być przezroczyste, ale pokazuje tło dziecka, a nie rodzica.

Innymi słowy, to ustawienie wywołało następujący efekt:

outline: 7px solid rgba(255, 255, 255, 0.2);

Z witryny szkolnej W3

W CSS graniczne właściwości pozwalają określić styl i kolor obramowania elementu.

Zarys jest linia, która jest zasysane wokół elementów (poza granicami), aby element „stand out”.

Skrótowa właściwość konspektu ustawia wszystkie właściwości konspektu w jednej deklaracji.

Właściwości, które można ustawić, to (w kolejności): kolor konturu, styl konturu, szerokość konturu.

Jeśli brakuje jednej z powyższych wartości, np. „Zarys: bryła # ff0000;”, zostanie wstawiona domyślna wartość brakującej właściwości, jeśli taka istnieje.

Sprawdź tutaj, aby uzyskać więcej informacji: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Trochę starego pytania, ale warto wspomnieć o błędzie renderowania Firefoksa (wciąż obecny od stycznia 2013 r.), W którym kontur będzie renderowany na zewnątrz wszystkich elementów potomnych, nawet jeśli przepełnią one swój element nadrzędny (przez ujemne marginesy, cienie pola) itp.)

Możesz to naprawić za pomocą:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Bardzo niefortunnie, że wciąż nie został naprawiony. Zdecydowanie wolę kontury w wielu przypadkach, ponieważ nie dodają się one do wymiarów elementu, dzięki czemu nie musisz brać pod uwagę szerokości obramowania przy ustalaniu wymiarów elementu.

W końcu co jest prostsze?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Lub:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

Warto również zauważyć, że zarys W3C jest granicą IE, ponieważ IE nie implementuje modelu skrzynki W3C.

W modelu pudełkowym w3c ramka nie uwzględnia szerokości i wysokości elementu. W IE jest to włącznie.

Zrobiłem mały kawałek kodu css / html, aby zobaczyć różnicę między nimi.

outlinelepiej jest włączyć potencjalnie przepełnione elementy potomne, szczególnie do wbudowanego pojemnika.

borderjest znacznie bardziej dostosowane do bloku elementów -behaving.

Skrzypce dla pana!

Właściwość konturu w CSS rysuje linię wokół elementu. Jest podobny do granicy, z tym że:

• Zawsze obejmuje wszystkie strony, nie można podać konkretnego
• boki Nie jest częścią modelu pudełkowego, więc nie wpłynie na
  pozycję elementu ani sąsiednich elementów

Źródło: https://css-tricks.com/almanac/properties/o/outline/

Jako praktyczny przykład użycia „konturu”, słabą kropkowaną ramkę, która podąża za fokusem systemowym na stronie internetowej (np. Jeśli tabulujesz linki) można kontrolować za pomocą właściwości konspektu (przynajmniej wiem, że może to zrobić w Firefoksie , nie wypróbowałem innych przeglądarek).

Powszechną techniką „zastępowania obrazu” jest na przykład:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

z następującymi w CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

Problem polega na tym, że gdy fokus osiąga znacznik, kontur przesuwa się o 1000em w lewo. Kontur pozwala wyłączyć kontur skupienia na takich elementach.

Uważam, że pasek narzędzi programisty IE również używa czegoś takiego jak kontur „pod maską” podczas podświetlania elementów do inspekcji w trybie „wybierz”. To dobrze pokazuje fakt, że „zarys” nie zajmuje miejsca.

Pomyśl o zarysie jako granicy, którą projektor rysuje poza czymś, ponieważ granica jest faktycznym przedmiotem wokół tego obiektu.
projekcja może łatwo zachodzić na siebie, ale ramka nie pozwala przejść.
czasami kiedy używam grid+%width, border zmienia skalowanie w porcie widoku, na przykład div z width:100%rodzicem z width:100pxcałkowicie wypełnia rodzic, ale kiedy dodam border:solid 5pxdo div, zmniejsza div, aby zrobić miejsce na obramowanie (chociaż jest to rzadkie i do obejścia!),
ale z konturem nie ma tego problemu, ponieważ kontur jest bardziej wirtualny: D to tylko linia poza elementem, ale problem polega na tym, że jeśli nie wykonasz właściwego odstępu, nakłada się on na inną zawartość.

w skrócie:
zarysuj zalety:
nie zadziera z odstępami i
wadami pozycji :
duża szansa na nakładanie się

Różnice między ramką a konturem:

Obramowanie jest częścią modelu pudełkowego, więc wlicza się do rozmiaru elementu. Kontur nie jest częścią modelu pudełkowego, więc nie wpływa na elementy w pobliżu.

Próbny:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

Skopiowano z W3Schools:

Definicja i zastosowanie

Kontur jest linią rysowaną wokół elementów (poza granicami), aby element „się wyróżniał”.