CSS właściwość konturu jest mylącą właściwością. Kiedy po raz pierwszy się o tym dowiadujesz, trudno jest zrozumieć, jak bardzo różni się ona od własności granicznej. W3C wyjaśnia, że ma to następujące różnice:
- Kontury nie zajmują miejsca.
- Kontury mogą nie być prostokątne.
Kontury nie zajmują miejsca
To stwierdzenie samo w sobie jest mylące. W jaki sposób obiekt na twojej stronie internetowej może nie zajmować miejsca na stronie internetowej? Ale jeśli myślisz o swojej stronie internetowej jak o cebuli, każdy element na stronie może być nałożony na inny element. Właściwość outline nie zajmuje miejsca, ponieważ zawsze znajduje się na górze pudełka elementu.
Gdy wokół elementu zostanie umieszczony kontur, nie ma to żadnego wpływu na układ tego elementu na stronie. Nie zmienia rozmiaru ani położenia elementu. Jeśli umieścisz kontur na elemencie, zajmie on taką samą ilość miejsca, jak gdybyś nie miał konturu tego elementu. To nie dotyczy a of granica. Obramowanie elementu jest dodawane do zewnętrznej szerokości i wysokości elementu. Więc jeśli miałeś
wizerunek który miał 50 pikseli szerokości, z 2-pikselową ramką, zajmowałby 54 piksele (2 piksele na każdą boczną ramkę). Ten sam obraz z 2-pikselowym konturem zajmowałby na stronie tylko 50 pikseli szerokości, a kontur wyświetlałby się nad zewnętrzną krawędzią obrazu.Kontury mogą nie być prostokątne
Zanim zaczniesz myśleć „fajnie, teraz mogę rysować kółka”, pomyśl jeszcze raz. To stwierdzenie ma inne znaczenie, niż mogłoby się wydawać. Kiedy umieszczasz ramkę na elemencie, przeglądarka interpretuje element tak, jakby był jednym ogromnym prostokątnym prostokątem. Jeśli pudełko zostanie podzielone na kilka wierszy, przeglądarka po prostu pozostawi otwarte krawędzie, ponieważ pudełko nie jest zamknięte. To tak, jakby przeglądarka widziała obramowanie na nieskończenie szerokim ekranie — wystarczająco szerokim, by obramowanie było jednym ciągłym prostokątem.
Natomiast właściwość konturu uwzględnia krawędzie. Jeśli zarysowany element obejmuje kilka linii, kontur zamyka się na końcu linii i ponownie otwiera się w następnej linii. Jeśli to możliwe, kontur również pozostanie w pełni połączony, tworząc nieprostokątny kształt.
Zastosowania Własności konspektu
Jednym z najlepszych zastosowań właściwości konturu jest wyróżnianie wyszukiwanych haseł. Wiele witryn robi to za pomocą koloru tła, ale możesz również użyć właściwości konturu i nie martwić się o dodatkowe odstępy na swoich stronach.
Właściwość kontur-kolor przyjmuje termin „odwrócony”, co powoduje, że kolor konturu jest odwrotnością bieżącego tła. Pozwala to na wyróżnianie elementów na dynamicznych stronach internetowych bez konieczności poznania czego używane są kolory.
Możesz również użyć właściwości konturu, aby usunąć przerywaną linię wokół aktywnych łączy. Ten artykuł z Sztuczki CSS pokazuje, jak usuń kropkowany kontur.