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