CSS Контуры больш, чым проста мяжы
CSS ўласцівасць абрысы з'яўляецца заблытаным уласцівасцю. Калі вы першы даведаецеся пра гэта, гэта цяжка зразумець, як гэта нават аддалена адрозніваецца ад ўласцівасці межаў. W3C тлумачыць , як якія маюць наступныя адрозненні:
- Контуры не займаюць прастору.
- Контуры могуць быць не прастакутнымі.
Контуры не займаюць прастору
Гэта зацвярджэнне, само па сабе з'яўляецца заблытаным. Як аб'ект на вэб-старонцы не займаюць месцы на вэб-старонцы? Але калі вы думаеце пра вашай вэб-старонцы, як як лук, кожны элемент на старонцы можа быць пласт па-над іншага элемента. Ўласцівасць абрыс не займае прастору, таму што ён заўсёды знаходзіцца на верхняй частцы акна элемента.
Калі контур змешчаны вакол элемента, ён не аказвае ніякага ўплыву на тое, як гэты элемент выкладзены на старонцы. Ён не змяняе памер або становішча элемента. Калі змясціць схему на элемент, ён будзе займаць адзін і той жа аб'ём прасторы, як калі б вы не мелі схему гэтага элемента. Гэта не адносіцца да мяжы. Мяжа на элеменце дадаецца да знешняй шырыні і вышыні элемента. Так што калі ў вас было малюнак , якое было 50 пікселяў ў шырыню, з мяжы з 2-піксельнай, ён будзе займаць 54 піксэляў (2 пікселяў для кожнага боку мяжы). Тое ж самае малюнак з 2-піксельнай акрэсліць будзе займаць толькі 50 пікселяў у шырыню на старонцы, контур будзе адлюстроўвацца па-над вонкавага краю малюнка.
Контуры могуць быць непрямоугольной
Перад тым, як пачаць думаць «выдатна, цяпер я магу маляваць кругі!» Падумайце яшчэ раз. Гэта зацвярджэнне мае іншае значэнне, чым вы маглі б падумаць. Калі вы кладзе мяжу на элемент, браўзэр інтэрпрэтуе элемент, як калі б гэта быў адзін гіганцкі прастакутны скрыню. Калі акно разбіваецца на некалькі радкоў, браўзэр толькі пакідае краю адкрытымі таму што скрынка не зачынена. Гэта як калі браўзэр бачыць мяжу з бясконца шырокім экранам - досыць шырока для таго, каб мяжа будзе адзін суцэльны прастакутнікам.
У супрацьлегласць гэтаму, ўласцівасць контур прымае краю пад увагу. Калі паказана элемент ахоплівае некалькі радкоў, контур зачыняецца ў канцы лініі і зноў адраджаецца на наступным радку. Калі гэта магчыма, контур будзе заставацца цалкам падлучаны, а таксама, стварэнне непрямоугольной формы.
Выкарыстанне контурных уласнасці
Адзін з лепшых відаў выкарыстання маёмасці контуру, каб вылучыць ўмова пошуку. Многія сайты робяць гэта з колерам фону, але вы таксама можаце выкарыстоўваць ўласцівасць контуру і не турбавацца аб даданні якія-небудзь дадатковых інтэрвалаў на вашых старонках.
Ўласцівасць абрысы колеру прымае тэрмін «інвертаваць», які робіць колер контуру зваротнай велічыні бягучага фону. Гэта дазваляе вылучыць элементы на дынамічных вэб - старонак без неабходнасці ведаць , якія колеру выкарыстоўваюцца .
Вы можаце таксама выкарыстоўваць ўласцівасць контуру, каб выдаліць пункцірную лінію вакол актыўнай спасылкі. Гэты артыкул з CSS-Tricks паказана, як выдаліць пункцірны контур.