The CSS контурното свойство е объркващо свойство. Когато научите за първи път за него, е трудно да разберете как той дори се различава отдалечено от граничния имот. W3C го обяснява като имащ следните разлики:
- Контурите не заемат място.
- Контурите могат да бъдат неправоъгълни.
Контури Не заемайте място
Това твърдение само по себе си е объркващо. Как обектът на вашата уеб страница може да не заема място на уеб страницата? Но ако смятате, че вашата уеб страница е като лук, всеки елемент на страницата може да бъде наслоен върху друг елемент. Свойството outline не заема място, защото винаги се поставя отгоре на полето на елемента.
Когато контур е поставен около елемент, това няма ефект върху начина, по който този елемент е разположен на страницата. Това не променя размера или позицията на елемента. Ако поставите контур върху елемент, той ще заема същото количество пространство, както ако не сте имали контур на този елемент. Това не е вярно за a граница. Граница на елемент се добавя към външната ширина и височина на елемента. Така че, ако сте имали
изображение това беше 50 пиксела ширина, с 2-пикселна граница, ще отнеме 54 пиксела (2 пиксела за всяка странична граница). Същото изображение с контур от 2 пиксела ще заеме само 50 пиксела ширина на страницата ви, контурът ще се покаже над външния ръб на изображението.Контурите могат да бъдат неправоъгълни
Преди да започнете да мислите „готино, сега мога да рисувам кръгове“, помислете отново. Това твърдение има различно значение, отколкото си мислите. Когато поставите рамка върху елемент, браузърът интерпретира елемента така, сякаш е едно гигантско правоъгълно поле. Ако кутията се раздели на няколко реда, браузърът просто оставя ръбовете отворени, защото кутията не е затворена. Сякаш браузърът вижда границата с безкрайно широк екран - достатъчно широк, за да може тази граница да бъде един непрекъснат правоъгълник.
За разлика от това, свойството контур взема под внимание ръбовете. Ако очертаният елемент обхваща няколко реда, контурът се затваря в края на реда и се отваря отново на следващия ред. Ако е възможно, контурът също ще остане напълно свързан, създавайки неправоъгълна форма.
Използване на структурата на свойството
Едно от най-добрите приложения на свойството outline е да се подчертаят думите за търсене. Много сайтове правят това с цвят на фона, но можете също да използвате свойството контур и да не се притеснявате да добавите допълнително разстояние на страниците си.
Свойството outline-color приема термина „инвертиране“, което прави цвета на контура обратен на текущия фон. Това ви позволява да маркирате елементи на динамични уеб страници, без да е необходимо да знаете какво се използват цветове.
Можете също да използвате свойството outline, за да премахнете пунктираната линия около активните връзки. Тази статия от CSS-трикове показва как да премахнете пунктирания контур.